In Flutter, packages are reusable bits of code generally developed by the community that you can include in your projects. Using packages, you can quickly build an app without having to develop everything from scratch.
The main site where you can look for packages is https://pub.dev/flutter.

We'll now use a procedure that is valid to install any package in your Flutter apps, as follows:

1. In order to use the CircularPercentIndicator package, from the https://pub.dev/flutter website, let's look for percent_indicator. The first result should be the package we need, which is the percent_indicator library, as shown in the following screenshot:

2. Click on the library link. The package page shows information and examples on how to install and use the package. In particular, for any package, we need to add the dependency in the pubspec.yaml configuration file.
3. Copy the dependency from the Getting Started section. At the time this book is written, it is percent_indicator: "^2.1.1+1", but it might have changed when you read this. 

4. Open the pubspec.yaml file in the root folder of your app. Every Flutter project has a file named pubspec.yaml, written in the YAML language. This is where you specify the required dependencies in your Flutter project. 
5. Find the dependencies section and add the percent_indicator dependency under the Flutter SDK, as shown in the following code snippet: 

dependencies:
 flutter:
   sdk: flutter
 percent_indicator: ^2.1.1+1

The percent_indicator dependency MUST be indented like the flutter dependency, as shown in the preceding code, as YAML files use indentation to represent relationships between layers.

6. Next, back in the main.dart file, let's add the percent_indicator import, as follows:

import 'package:percent_indicator/percent_indicator.dart';

7. Then, in the column, let's delete the "hello" text, and, in its place, let's use a CircularPercentIndicator. We'll include it in an Expanded widget so that it takes all the available vertical space in the column. The code is shown under bullet point 9. 

8. A CircularPercentIndicator requires a radius property that represents the size of the circle, in logical pixels. We could certainly choose an arbitrary size, such as 200, but a better approach might be choosing a relative size that depends on the available space on the screen.

   In this case, we can use a LayoutBuilder. A LayoutBuilder provides the parent widget's constraints, so that you can find out how much space you have for your widgets. 

9. In the body of the Scaffold, instead of returning a Column, let's return a LayoutBuilder in its builder method; we'll find the available width by calling the maxWidth property of the BoxContraints instance that was passed to the method and put it into an availableWidth constant, like this: 

body: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
   final double availableWidth = constraints.maxWidth;
   return Column(children: [ 

10. Inside the Column widget, under the first row containing the Work and Break buttons, let's add a CircularPercentIndicator. The radius of the circle will be half of the availableWidth, and the lineWidth will be 10. If you like a thicker border, you can also try another value, such as 15, or even 20. The code is shown in the following snippet:

Expanded(
 child: CircularPercentIndicator(
 radius: availableWidth / 2,
 lineWidth: 10.0,
 percent: 1,
 center: Text("30:00",
 style: Theme.of(context).textTheme.display1),
 progressColor: Color(0xff009688),
, ),

The layout of the main screen of our app is now ready. Now, we need to add the logic to make the timer actually count the time. This is what we're doing next.