Horizontal progress bar also known as LinearProgressIndicator widget in flutter is used to display progress of any task in linear percentage form. The LinearProgressIndicator filled as the data loaded on screen and from 1 to 100 scale. In this tutorial we would Start Stop LinearProgressIndicator on button click using animation. The filling time here we set is 5 seconds. The complete LinearProgressIndicator would take 5 seconds to filled, you can also change this time according to your requirement dynamically. So in this tutorila we would Create Flutter Horizontal Progress Bar LinearProgressIndicator iOS Android Example Tutorial.
Contents in this project Flutter Horizontal Progress Bar LinearProgressIndicator iOS Android Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method. This method is used to call our root class on app start time.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. We would call here HorizontalProgressIndicator() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Horizontal Progress Bar') ), body: Center( child: HorizontalProgressIndicator() ) ) ); } } |
4. Create a class named as HorizontalProgressIndicator extends with StatefulWidget. In this class we would call HorizontalProgressIndicatorState using createState() method. This method would enable the mutable state calling structure in given class.
|
1 2 3 4 |
class HorizontalProgressIndicator extends StatefulWidget { @override HorizontalProgressIndicatorState createState() => new HorizontalProgressIndicatorState(); } |
5. Create a class named as HorizontalProgressIndicator extends with StatefulWidget with SingleTickerProviderStateMixin class. The SingleTickerProviderStateMixin enables animation controller object in given class tree.
|
1 2 3 4 5 |
class HorizontalProgressIndicatorState extends State<HorizontalProgressIndicator> with SingleTickerProviderStateMixin { } |
6. Create Animation controller and Animation object in given class.
- AnimationController : Used to create controller for animation. To perform various task like starting animation, stopping animation and reset animation.
- Animation : Animation with value T.
|
1 2 3 |
AnimationController controller; Animation animation; |
7. Create 2 double variable named as beginAnim and endAnim. They both is used to define animation starting point and ending point.
|
1 2 |
double beginAnim = 0.0 ; double endAnim = 1.0 ; |
8. Create initState() method for declaring all the animation with given properties.
- duration : Used to set total duration for complete animation.
- animation : Used to set animation starting and ending value.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@override void initState() { super.initState(); controller = AnimationController( duration: const Duration(seconds: 5), vsync: this); animation = Tween(begin: beginAnim, end: endAnim).animate(controller) ..addListener(() { setState(() { // Change here any Animation object value. }); }); } |
9. Create dispose() inbuilt method for clearing controller when object is removed from parent tree.
|
1 2 3 4 5 |
@override void dispose() { controller.stop(); super.dispose(); } |
10. Create 3 functions named as startProgress(), stopProgress() and resetProgress() . We would call these functions on button click event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
startProgress(){ controller.forward(); } stopProgress(){ controller.stop(); } resetProgress(){ controller.reset(); } |
11. Create 1 LinearProgressIndicator widget with 3 Raised button widgets in Widget build area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
Widget build(BuildContext context) { return Center( child: Column(children: [ Container( padding: EdgeInsets.all(20.0), child: LinearProgressIndicator( value: animation.value, )), RaisedButton( child: Text(" Start Progress "), onPressed: startProgress, color: Colors.red, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Stop Progress "), onPressed: stopProgress, color: Colors.red, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Reset Progress "), onPressed: resetProgress, color: Colors.red, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ] )); } |
12. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Horizontal Progress Bar') ), body: Center( child: HorizontalProgressIndicator() ) ) ); } } class HorizontalProgressIndicator extends StatefulWidget { @override HorizontalProgressIndicatorState createState() => new HorizontalProgressIndicatorState(); } class HorizontalProgressIndicatorState extends State<HorizontalProgressIndicator> with SingleTickerProviderStateMixin { AnimationController controller; Animation animation; double beginAnim = 0.0 ; double endAnim = 1.0 ; @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(seconds: 5), vsync: this); animation = Tween(begin: beginAnim, end: endAnim).animate(controller) ..addListener(() { setState(() { // Change here any Animation object value. }); }); } @override void dispose() { controller.stop(); super.dispose(); } startProgress(){ controller.forward(); } stopProgress(){ controller.stop(); } resetProgress(){ controller.reset(); } @override Widget build(BuildContext context) { return Center( child: Column(children: [ Container( padding: EdgeInsets.all(20.0), child: LinearProgressIndicator( value: animation.value, )), RaisedButton( child: Text(" Start Progress "), onPressed: startProgress, color: Colors.red, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Stop Progress "), onPressed: stopProgress, color: Colors.red, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text(" Reset Progress "), onPressed: resetProgress, color: Colors.red, textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ] )); } } |
Screenshots:
