Skip to main content

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
Live, try it

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

InputTypeDefaultRange
valueNumber620 – 100
stepsTextCart,Shipping,Payment,Review,Done—
accentText#10b981hex colour
inkText#ecfdf5hex colour
bgText#06120dhex colour

Events: milestone

More Flutter animations

The same idea in other frameworks: React orbit loader · JavaScript upload progress ring