Last updated:
0 purchases
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.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.