How to implement the Percent Indicator in Flutter?

· 4 min read
How to implement the Percent Indicator in Flutter?
How to implement the Percent Indicator in Flutter?

In this article, we will see how to implement the Percent Indicator in a flutter app development. We will use the percent indicator package. In this package, you can easily create animated percent progress indicators.

How to implement the Percent Indicator in Flutter?

The flutter percentage indicator package gives a progress bar indicator. It is different or linear from the default progress bar indicator. It is used to display the progress indicator time in any application, such as download, installation, uploading, etc. In this plugin, there are two important indicators that are a linear indicator and a circular indicator.

Two ways of percent indicator:

  • CircularProgressIndicator: The CircularProgressIndicator is a widget that shows progress with a circle. So, it is a circular progress bar that indicates whether the application is busy or on hold.
  • LinearProgressIndicator: The LinearProgressIndicator is a widget that shows a progress bar in a linear direction and shows that the application is in progress.

Percent Indicator attributes:

  • progressColor — Progress color properties are used for the progress bar so that the progress line can be easily visible. You can change the progress color as per your choice.
  • percent — The percent defines the percentage as long as the progress bar is animated. It takes a double value from 0 -> 1.
  • radius — Radius properties define the size of the circle.
  • center — Center properties define the widget that is in the center of the progress bar. It can be used by both linear and circular indicators.

How to implement Percent indicator:

1) Add dependencies to pubspec — yaml file.

dependencies:
  percent_indicator: "^2.1.7+2"

2) Import the package

import 'package:percent_indicator/percent_indicator.dart';

3) Run flutter package get

Code Implementation:

Create a new dart file called percent_indicator_demo.dart inside the lib folder. Now we have shown both the indicator and the circular indicator. First of all, we have to set the percentage timer in the init state which will increase the timer when the progress bar is running in your application.

@override
void initState() {
  Timer timer;
  timer = Timer.periodic(Duration(milliseconds:1000),(_){
    setState(() {
      percent+=10;
      if(percent >= 100){
        timer.cancel();
        // percent=0;
      }
    });
  });
  super.initState();
}

Now we have taken the circular percent indicator, which has given the background color, the progress color separately. Also, it showed the progress percentage at the center which will update the progress percentage.

CircularPercentIndicator(
  radius: 120.0,
  lineWidth: 10.0,
  animation: true,
  percent: percent/100,
  center: Text(
    percent.toString() + "%",
    style: TextStyle(
      fontSize: 20.0,
      fontWeight: FontWeight.w600,
      color: Colors.black),
  ),
  backgroundColor: Colors.grey[300],
  circularStrokeCap: CircularStrokeCap.round,
  progressColor: Colors.redAccent,
)

Now we have taken the circular percent indicator, which has given the background color, the progress color separately. Also, it showed the progress percentage at the center which will update the progress percentage.

LinearPercentIndicator( //leaner progress bar
  animation: true,
  animationDuration: 1000,
  lineHeight: 20.0,
  percent:percent/100,
  center: Text(
    percent.toString() + "%",
    style: TextStyle(
      fontSize: 12.0,
      fontWeight: FontWeight.w600,
      color: Colors.black),
    ),
    linearStrokeCap: LinearStrokeCap.roundAll,
    progressColor: Colors.blue[400],
    backgroundColor: Colors.grey[300],
  ),
),

Output:

When we run the application, we will get the screen’s output as shown below.

Percent Indicator

 

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to implement the Percent Indicator in a flutter. You can modify and experiment with it according to your own. Also, feel free to comment and provide any other suggestions regarding Flutter.

Leave a Reply