Percent Indicator In Flutter
By: Naveen Srivastava
Tags: App Development, Flutter Widget, Flutter, Dart, Flutter App Development

In this article, we will explore the Percent Indicator in flutter using the percent indicator package. With the help of the package, we can easily achieve flutter animated percent progress indicators. So let’s get started

We will implement a demo of the percent Indicator that can be easily embedded in your flutter applications.

Table Of Contents :

Flutter Percent Indicator Implementation Code Implement Code File Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”.

Percent Indicator :

The flutter percentage indicator package produces a progress bar indicator that is different or linear from the default progress bar indicator that looks more beautiful. It is used to display the progress indicator time in any application, such as download, installation, uploading, etc. In this plugin, linear indicator and circular indicator are the two important indicators that cover it. Let’s look at its important indicator.

Two ways of percent indicator

CircularProgressIndicator: The CircularProgressIndicator is a widget that shows progress with a circle. 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.

Some of the important Percent Indicator attributes:

progressColor — Progress color properties are used for the progress bar so that the progress line can be easily visible and you can change the progress color as per your choice.

Progress color properties are used for the progress bar so that the progress line can be easily visible and 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.

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.

— Radius properties define the size of the circle. center — Center properties define the widget that is in the centre of the progress bar. It can be used by both linear and circular indicators.

Demo Module:

Implementation :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:

percent_indicator: "^2.1.7+2"

Step 2: import the package :

import 'package:percent_indicator/percent_indicator.dart';

Step 3: Run flutter package get

Code Implementation :

Create a new dart file called percent_indicator_demo.dart inside the lib folder

In this screen, we have shown both the indicator and the circular indicator. In which centre properties are used in which progress bar per cent is initialized. Let us understand this in detail with the help of a reference.

First of all, we have set the percentage timer in the init state which will increase the timer when the progress bar in running them 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, and showed the progress percentage at the centre 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, and showed the progress percentage at the centre 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],

),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File :

import 'dart:async';



import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

import 'package:percent_indicator/circular_percent_indicator.dart';

import 'package:percent_indicator/linear_percent_indicator.dart';

class PercentIndicatorDemo extends StatefulWidget {

@override

_PercentIndicatorDemoState createState() => _PercentIndicatorDemoState();

}



class _PercentIndicatorDemoState extends State<PercentIndicatorDemo> {



double percent = 0.0;



double _height;

double _width;



@override

void initState() {

Timer timer;

timer = Timer.periodic(Duration(milliseconds:1000),(_){

setState(() {

percent+=10;

if(percent >= 100){

timer.cancel();

// percent=0;

}

});

});

super.initState();

}

@override

Widget build(BuildContext context) {

_height = MediaQuery.of(context).size.height;

_width = MediaQuery.of(context).size.width;



return Scaffold(

appBar: AppBar(

title:Text("Percent Indicator Demo"),

backgroundColor: Colors.redAccent

),

body:Container(

child:Column(

mainAxisAlignment:MainAxisAlignment.spaceEvenly,

crossAxisAlignment:CrossAxisAlignment.center,

children: <Widget>[



Column(

children: [

Text(

'Circular Percent Indicator',

style: TextStyle(

fontStyle: FontStyle.italic,

fontWeight: FontWeight.w700,

fontSize: 15),

),

SizedBox(

height: 40,

),

Container(

padding: EdgeInsets.all(10),

child: 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,

)

),

],

),





Column(

children: [

Text(

'Linear Percent indicator',

style: TextStyle(

fontStyle: FontStyle.italic,

fontWeight: FontWeight.w700,

fontSize: 15),

),

SizedBox(

height: 40,

),



Container(

margin: EdgeInsets.only(left:30,right:30),

alignment:Alignment.center,

child: 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],

),

),

],

),

],

)

)

);

}

}

Conclusion :

In this article, I have explained a Percent Indicator in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Percent Indicator demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Percent Indicator in your flutter project. We will show you the Percent Indicator is?, and working on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.