Percent Indicator Plugin in Flutter
As part of the Awesome Plugin series, this article discusses the Percent Indicator Plugin in Flutter.
We will see how to create a good looking percent indicator that creates easy and effective way to display percentages in Flutter. Percent Indicator can be created by simply making use of the Flutter plugin called the percent_indicator.
This plugin has been created by this developer. Do not forget to check them out and start the project.
We will start with how to use this plugin and what are the important use cases that are covered by this plugin. There are 2 important Indicators that this covers, primarily LinearIndicator and CircularIndicator.
Percent Indicator – Flutter Basics
To begin with, start by making use of the Flutter’s percent_indicator plugin
dependencies: percent_indicator: ^2.1.1+1
Import the following line into your main.dart file or whichever file is your main file.
Percent_Indicator – Attributes
The current plugin supports two different Widgets. The Linear and Circular Percent Indicator.
Some of the important Percent Indicator attributes include,
- progressColor – Color of the Progress Bar that shows on the Percent Indicator Widget. Since the progress Color is going to be important in terms of UI/UX, make sure to use a bold color. Color can be defined through the Colors class.
- percent – Defines the percentage up to which the bar should be animated. Takes a double value from 0 -> 1.
- radius – Specific to the Circular Progress Widget only. This defines the size of the Circle.
- center – Center defines the widget it holds in the center of the Progress Bar. Can be used by both Linear and Circular Indicators.
The following section holds the example program to create the Linear and Circular Progress Indicators. Do not forget to read the last section for the explanation of the app example.
PercentIndicator App Example
This section holds the example app to create the Percent Indicator with both Linear and Circular Widgets. We will use a Container Widget and a Column widget to hold them in a vertical way. See the following section for the example App images.
The application looks like
Awesome Flutter plugin – Conclusion
We are looking at some really useful Plugins and do not forget to check all of them out. Some of the useful Flutter Plugins makes the boiler plater really easy and can help in easing the effort to create massive projects in short span of time.
Check out –
“Learn and Be Curious”