simple_progress_indicators

Description:

simple progress indicators

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 #

Linear Progress indicator

ProgressBar

ProgressBarAnimation
AnimatedProgressBar
Animation demo





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],
),
),
),
),
);
}
copied to clipboard
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),
),
copied to clipboard
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),
),
copied to clipboard
For full demo check examples folder.
Animation demo #



Additional information #
For issues and animation ideas visit issues section on github homepage.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter