Percent Indicator Plugin in Flutter

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.

import 'package:percent_indicator/percent_indicator.dart';

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.


import 'dart:async';
import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';

void main() => runApp(PercentIndicatorApp());

class PercentIndicatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample ShimmerEffect Widget',
home: PercentIndicatorWidget(),
);
}
}

class PercentIndicatorWidget extends StatefulWidget {
PercentIndicatorWidget({Key key}) : super(key: key);

@override
_PercentIndicatorWidgetState createState() => _PercentIndicatorWidgetState();
}

class _PercentIndicatorWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Percentage Indicator"),),
body: Container(
padding: EdgeInsets.all(25.0),
child:Column(
children: [
CircularPercentIndicator(
progressColor: Colors.redAccent,
percent: 0.5,
animation: true,
radius: 250.0,
lineWidth: 15.0,
circularStrokeCap: CircularStrokeCap.round,
center: Text("Circle"),
),
LinearPercentIndicator(
width: 250.0,
lineHeight: 15.0,
progressColor: Colors.orangeAccent,
percent: 0.7,
center: Text("Circle"),
animation: true,
)
],
)
),
);
}
}

 

The application looks like

Percent Indicator
Percent Indicator App

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 –

Flutter Badges Plugin

Animated Text Kit

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *