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 :
“ 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.
- 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 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.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
