Flutter animation example
Flutter Animated Progress Bar: Stepped With Milestones
A progress bar is more reassuring when it shows where the milestones are. This one fills with a spring, animates a diagonal stripe while it is working, pops each milestone dot as the fill passes it, and counts the percentage up instead of jumping. It works for uploads, checkout steps or a profile completion meter.
- 4.3 KB file
- 5 live inputs
- Flutter runtime
How this stepped progress bar works
- The fill is a spring toward the value input, so jumps from 20 to 80 still animate smoothly.
- Milestones are evenly spaced; crossing one triggers a scale pop and a "milestone" event.
- The stripes move only while the value is changing or below 100, so a finished bar is calm.
Add it to your Flutter app
Install exodeui_flutter, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';
// Add assets/flutter-progress-bar.exode to pubspec.yaml (download it below).
class FlutterProgressBar extends StatefulWidget {
const FlutterProgressBar({super.key});
@override
State<FlutterProgressBar> createState() => _FlutterProgressBarState();
}
class _FlutterProgressBarState extends State<FlutterProgressBar> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-progress-bar.exode');
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _json,
builder: (context, snap) => snap.hasData
? ExodeUICanvas(
key: _canvas,
artboardJson: snap.data!,
fit: 'Layout',
onReady: () { },
onTrigger: (name, _) {
// fires: 'milestone'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
value | Number | 62 | 0 – 100 |
steps | Text | Cart,Shipping,Payment,Review,Done | — |
accent | Text | #10b981 | hex colour |
ink | Text | #ecfdf5 | hex colour |
bg | Text | #06120d | hex colour |
Events: milestone
More Flutter animations
Bouncing Bars LoaderFive bars bouncing in a travelling wave with squash and stretch, plus rotating status messages.Speed Dial FABA floating action button that rotates to close while three labelled actions spring out in sequence.Hero Product TransitionA list item whose image arcs into the detail header while a circular reveal uncovers the page.3D Drawer MenuA side menu revealed by the page swinging back in 3D; open by tapping or dragging from the edge.Wavy TypewriterA typewriter whose letters drop in with a bounce; words type, hold, delete and cycle.Parallax Scroll ListA scrolling list of cards whose images shift at a slower rate, with momentum and edge bounce.
The same idea in other frameworks: React orbit loader · JavaScript upload progress ring