Simple progress indicators package with solid colors and gradients. Can be used to show progress or for simple progress bar animation.

How it looks

Table of contents

Usage

Linear Progress indicator

ProgressBar

ProgressBar is a basic linear indicator widget. It's a Stateless Widget that produces basic horizontal rounded rectangle with optional background rounded rectangle underneath. Include it in your build method like:

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: ProgressBar(
            value: 0.5,
            //specify only one: color or gradient
            //color:Colors.red,
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.yellowAccent, Colors.deepOrange],
            ),
          ),
        ),
      ),
    );
  }

It has several configurable parameters:

  • value - current indicator value, where 0.0 is 0% progress, 1.0 is 100% progress
  • width - indicator width, defaults to 200.0
  • height - indicator height, defaults to 10.0
  • color - solid indicator fill color
  • gradient - gradient fill, accepts Gradient class
  • backgroundColor - solid indicator background color, defaults to transparent

Minimum working widget requires only a value and color OR gradient property. NOTE: Specifying both properties is not accepted.

ProgressBarAnimation

ProgressBarAnimation is a simple animating progress bar widget. It animates ProgressBar widget for a given duration. Animation starts at the time the widget is built.

It has several configurable parameters:

  • duration - 0% to 100% animation duration
  • width - indicator width, defaults to 200.0
  • height - indicator height, defaults to 10.0
  • color - solid indicator fill color
  • gradient - gradient fill, accepts Gradient class
  • backgroundColor - solid indicator background color, defaults to transparent
  • curve - animation curve, defaults to linear. For other curves check Curves
ProgressBarAnimation(  
  duration: const Duration(seconds: 2),  
  gradient: const LinearGradient(  
    colors: [  
      Colors.blue,  
      Colors.purple,  
    ],  
  ),  
  backgroundColor: Colors.grey.withOpacity(0.4),  
),

AnimatedProgressBar

AnimatedProgressBar is a ImplicitlyAnimatedWidget. It behaves like other flutter AnimatedFoo widgets. This animates value parameter changes for a given duration. Animation starts only when one (initial) value changes to other (final) value. See the example below.

It has several configurable parameters:

  • value - value widget animates to, need to be changed
  • duration - initial value to final value animation duration
  • width - indicator width, defaults to 200.0
  • height - indicator height, defaults to 10.0
  • color - solid indicator fill color
  • gradient - gradient fill, accepts Gradient class
  • backgroundColor - solid indicator background color, defaults to transparent
  • curve - animation curve, defaults to linear. For other curves check Curves
  • onEnd - callback to trigger additional actions (e.g. another animation) at the end of the current animation
AnimatedProgressBar(  
  value: full ? 1.0 : 0.0,  
  duration: const Duration(seconds: 3),  
  gradient: const LinearGradient(  
    colors: [  
      Colors.amber,  
      Colors.red,  
    ],  
  ),  
  backgroundColor: Colors.grey.withOpacity(0.4),  
),

For full demo check examples folder.

Animation demo

Additional information

For issues and animation ideas visit issues section on github homepage.

Libraries

simple_progress_indicators