How to show progress in linear bar in Flutter

Show progress in linear bar in Flutter

 

Linear progress indicator is also known as progress bar. It is used to show progress in a linear line or horizontally. This can be achieve by two steps only-

Step 1-Tween

It is a stateless object having its arguments begin and end. The major work of tween is to create a map from input to output range.
Now create a Tween with [begin] and [end], and it's property should be non null when tween is first used but we can use the null arguments if the values are filtered later.

Tween(begin: 0.0, end: 1.0)

Step 2- AnimationController

AnimationController is an animation object, It generates new values ranging from 0.0 to 1.0, when hardware is ready for new frame. It generates the numbers during its given
duration from (0.0 to 1.0).

You need to define 'vsync' when animation controller generated, this is necessary to stop offscreen animation (to prevent unnecessary use of resources)


AnimationController having few more methods to control the animation. For example
forward()-  to start the animation,
repeat()- repeat the same animation,
stop()- stop the current animation
dispose()- disposing animation before moving to some other screen

 

 

 

Below is the full example how you can implement LinearProgressIndicator in your code

class NetworkDiagnosis extends StatefulWidget {
  @override
  _NetworkDiagnosisState createState() => _NetworkDiagnosisState();
}

class _NetworkDiagnosisState extends State<NetworkDiagnosis> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Bar Demo'),
      ),
      body: Container(
        color: Colors.grey[300],
        padding: EdgeInsets.all(32.0),
        child: SlidingIndicator(),
      ),
    );
  }
}

class SlidingIndicator extends StatefulWidget {
  @override
  _SlidingIndicatorState createState() => _SlidingIndicatorState();
}

class _SlidingIndicatorState extends State<SlidingIndicator> with SingleTickerProviderStateMixin {
  AnimationController animController;
  Animation<double> animation;
  bool showSlider=false;

  @override
  void dispose() {
    animController.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return  Center(
        child: showSlider?LinearProgressIndicator( value:  animation.value):GestureDetector(
          onTap: (){
            animController = AnimationController(duration: const Duration(milliseconds: 5000), vsync: this);
            animation = Tween(begin: 0.0, end: 1.0).animate(animController)
              ..addListener(() {
                setState(() {
                  print('Here set the state');
                });
              });
            animController.repeat();
            setState(() {
              showSlider=true;
            });
          },

          child: Container(
            decoration: BoxDecoration(color: Colors.red),
            padding: EdgeInsets.all(20),
            child: Text('Start Slider'),
          ),
        )
    );
  }
}

• Tweet
• Share
• Share
• Share
• Share

Related Post