Percent Indicator In Flutter 2023:Percent Indicator
Percent Indicator In Flutter 2023 :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’s 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.
For more about percent_indicator
Two ways of percent indicator
- CircularProgressIndicator: A circular progress indicator informs the user that the application is busy by displaying a small animating circular icon. It blocks the user from interacting with the application when it is busy. Flutter provides a widget called CircularProgressIndicator which allows us to add a circular progress indicator to our application. It is use in instances such as downloading and uploading content, fetching data from api, processing data etc.
- LinearProgressIndicator: A linear progress indicator informs the user that the application is busy by displaying an animating linear bar. It blocks the user from interacting with the application when the application is busy. Flutter provides a widget called LinearProgressIndicator which allows us to add a linear progress indicator to our application. It is use in instances such as downloading and uploading content, fetching data from api, processing data etc.
There are two types of progress indicators:
- Indeterminate: Indeterminate progress indicator is an indicator that does not display a specific value at any instance of time and only indicates that progress is being made. It does not indicate how much progress remains to be made. For creating an indeterminate progress bar we set the value property as null.
- Determinate: Determinate progress indicator is an indicator that has a specific value at each instance of time. It also indicates how much progress is complete. The value in the determinate progress indicator increases monotonically from 0 to 1, where 0 indicates that progress is just started and 1 indicates that the progress is completed.
Some of the important Percent Indicator attributes:
Percent Indicator In Flutter 2023
- progressColor — Progress color properties are use for the progress bar so that the progress line 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.
- radius — Radius properties define the size of the circle.
- center — Center properties define the widget that is in the centre of the progress bar. It use by both linear and circular indicators.
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
percent_indicator: ^4.2.3Step 2: import the package :
import 'package:percent_indicator/percent_indicator.dart';Step 3: Run flutter package get
Create a new dart file called percent_indicator_demo.dart inside the lib folder.
In this screen, we shows both the indicator and the circular indicator. In which centre properties are use in which progress bar percent is initialize.
@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 take the circular percent indicator, which has gives the background color, the progress color separately, and shows 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.
LinearProgressIndicator:
To create a linear progress indicator, flutter provides a class called as LinearProgressIndicator. We have to call its constructor. There are no required properties for this widget so we can directly call the constructor.
LinearPercentIndicator( //linear 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],
),
),Full code: CircularPercentIndicator
Flutter provides a class called CircularProgressIndicator. To create a circular progress indicator we have to call its constructor. There are no required properties for this widget so we can directly call the constructor.
class PercentIndicatorDemo extends StatefulWidget {
@override
_PercentIndicatorDemoState createState() => _PercentIndicatorDemoState();
}
class _PercentIndicatorDemoState extends State<PercentIndicatorDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Circular Percent Indicators"),
),
body: Center(
child: ListView(children: <Widget>[
new CircularPercentIndicator(
radius: 65.0,
lineWidth: 10.0,
percent: 0.8,
header: new Text("Icon header"),
center: new Icon(
Icons.person_pin,
size: 50.0,
color: Colors.blue,
),
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
SizedBox(
height: 20,
),
new CircularPercentIndicator(
radius: 65.0,
animation: true,
animationDuration: 1200,
lineWidth: 15.0,
percent: 0.4,
center: new Text(
"40 hours",
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
circularStrokeCap: CircularStrokeCap.butt,
backgroundColor: Colors.yellow,
progressColor: Colors.red,
),
SizedBox(
height: 20,
),
new CircularPercentIndicator(
radius: 65.0,
lineWidth: 13.0,
animation: true,
percent: 0.7,
center: new Text(
"70.0%",
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
footer: new Text(
"Sales this week",
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),
SizedBox(
height: 20,
),
Padding(
padding: EdgeInsets.all(15.0),
child: new CircularPercentIndicator(
radius: 60.0,
lineWidth: 5.0,
percent: 1.0,
center: new Text("100%"),
progressColor: Colors.green,
),
),
SizedBox(
height: 20,
),
Container(
padding: EdgeInsets.all(10.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new CircularPercentIndicator(
radius: 25.0,
lineWidth: 4.0,
percent: 0.10,
center: new Text("10%"),
progressColor: Colors.red,
),
new Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
),
new CircularPercentIndicator(
radius: 25.0,
lineWidth: 4.0,
percent: 0.30,
center: new Text("30%"),
progressColor: Colors.orange,
),
new Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
),
new CircularPercentIndicator(
radius: 25.0,
lineWidth: 4.0,
percent: 0.60,
center: new Text("60%"),
progressColor: Colors.yellow,
),
new Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
),
new CircularPercentIndicator(
radius: 25.0,
lineWidth: 4.0,
percent: 0.90,
center: new Text("90%"),
progressColor: Colors.green,
)
],
),
)
]),
),
);
}
}
Linear Percent Indicators
class PercentIndicatorDemo extends StatefulWidget {
@override
_PercentIndicatorDemoState createState() => _PercentIndicatorDemoState();
}
class _PercentIndicatorDemoState extends State<PercentIndicatorDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Linear Percent Indicators"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: 140.0,
lineHeight: 14.0,
percent: 0.5,
center: Text(
"50.0%",
style: new TextStyle(fontSize: 12.0),
),
trailing: Icon(Icons.mood),
linearStrokeCap: LinearStrokeCap.roundAll,
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: 170.0,
animation: true,
animationDuration: 1000,
lineHeight: 20.0,
leading: new Text("left content"),
trailing: new Text("right content"),
percent: 0.2,
center: Text("20.0%"),
linearStrokeCap: LinearStrokeCap.butt,
progressColor: Colors.red,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: MediaQuery.of(context).size.width - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2000,
percent: 0.9,
center: Text("90.0%"),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.greenAccent,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: new LinearPercentIndicator(
width: MediaQuery.of(context).size.width - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2500,
percent: 0.8,
center: Text("80.0%"),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.green,
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
new LinearPercentIndicator(
width: 100.0,
lineHeight: 8.0,
percent: 0.2,
progressColor: Colors.red,
),
new LinearPercentIndicator(
width: 100.0,
lineHeight: 8.0,
percent: 0.5,
progressColor: Colors.orange,
),
new LinearPercentIndicator(
width: 100.0,
lineHeight: 8.0,
percent: 0.9,
progressColor: Colors.blue,
)
],
),
),
],
),
),
);
}
}
Explanation:
Following is the explanation of above-mention code for implementing Progress Indicators in Flutter:
- backgroundColor: This property is use in order to set the background color of a linear loader and a circular spin loader in the progress bar.
- strokeWidth: This property specifies the width of the line that is use to draw a circle in a CircularProgressIndicator.
- minHeight: It is the minimum height of the line that is use to draw the indicator in a LinearProgressIndicator or in other words it is use to define how thick the line in an indicator looks.
- valueColor: It is use in order to define the progress indicator’s value as an animated value. valueColor property covers the highlights of the completed task valued.
- AlwaysStoppedAnimation: It is use in order to specify a constant color in the valueColor property.
- value: Value property is use in order to differentiate between the determinate and indeterminate progress bar. If the value property is set as null, the progress indicator is indeterminate, which means that it will show the predefined animation on the indicator with its motion that does not indicate how much progress is completed. If set as non-null, then it displays how much progress is being made at a particular instant. A value of 0.0 indicates that progress is just started and a value of 1.0 indicates that the progress is completed.
Conclusion:we learned all about Flutter Progress Indicators. First, we understand what is progress indicator, what are its types, what are its subtypes, and then finally saw how you can add the Linear and Circular progress indicators to your Flutter app
Read More:
Implementation of rating bar: Flutter Rating Bar
Leave a Reply