Flutter Horizontal Progress Bar LinearProgressIndicator iOS Android Example Tutorial

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.

2. Call our main MyApp class using void main runApp() method. This method is used to call our root class on app start time.

3. Create our main MyApp class extends with State less widget. We would call here HorizontalProgressIndicator() class.

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.

5. Create a class named as HorizontalProgressIndicator extends with StatefulWidget with SingleTickerProviderStateMixin class. The SingleTickerProviderStateMixin enables animation controller object in given class tree.

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.

7. Create 2 double variable named as beginAnim and endAnim. They both is used to define animation starting point and ending point.

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.

9. Create dispose() inbuilt method for clearing controller when object is removed from parent tree.

10. Create 3 functions named as startProgress(), stopProgress() and resetProgress() . We would call these functions on button click event.

11. Create 1 LinearProgressIndicator widget with 3 Raised button widgets in Widget build area.

12. Complete source code for main.dart file:

Screenshots:

Flutter Horizontal Progress Bar LinearProgressIndicator iOS Android Example Tutorial

Leave a Reply

Your email address will not be published.