awesome_stepper

The beautiful Flutter stepper for multi-step forms, onboarding, checkout and wizard flows: an animated step progress indicator, sliding pages, form validation per step, a controller, and a side-by-side layout on tablets and foldables. Material 3, dark mode, no dependencies.

🏆 Award-winning: awesome_stepper won a Flutter developer challenge in 2021. Version 1.0 is a full redesign.

Flutter stepper with progress indicator, numbered steps and form validation

Live demo: monsware.com/awesome-stepper

4 header styles: the classic progress circle, a progress bar, dots, numbered steps.
Material 3: colors come from your theme; light and dark mode out of the box.
Smooth motion: pages slide and fade, the title cross-fades, the progress animates.
Validation: canContinue per step (sync or async) keeps the user on an invalid step and marks it red.
Step states: completed ✓, error !, locked 🔒 (disabled steps are skipped).
Controller: next(), back(), jumpTo(), listen to currentStep.
Large screens & foldables: from 840 px the steps move into a side list; on foldables (Galaxy Z Fold, Pixel Fold, iPhone Duo) the split follows the fold.
Accessible: screen reader announces "Step 2 of 5: Payment", 48 px buttons, RTL, arrow keys, swipe, haptics.
No dependencies besides Flutter.

Install

dependencies:
  awesome_stepper: ^1.0.0

Usage: a multi-step form in Flutter

import 'package:awesome_stepper/awesome_stepper.dart';

AwesomeStepper(
  onCompleted: () => print('done'),
  steps: [
    AwesomeStepperItem(
      label: 'Address',
      subtitle: 'Where should we deliver?',
      content: AddressForm(key: formKey),
      canContinue: () => formKey.currentState!.validate(),
    ),
    const AwesomeStepperItem(label: 'Payment', content: PaymentPage()),
    const AwesomeStepperItem(label: 'Review', content: ReviewPage()),
  ],
)

Header styles

AwesomeStepper(headerType: AwesomeStepperHeader.numbered, steps: steps)
// circle (default) · bar · dots · numbered

Controller

final controller = AwesomeStepperController();

AwesomeStepper(controller: controller, steps: steps);

await controller.next();   // runs canContinue first
await controller.jumpTo(3);
controller.addListener(() => print(controller.currentStep));

Custom controls

AwesomeStepper(
  steps: steps,
  controlBuilder: (onNext, onBack) => Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(onPressed: onBack, icon: const Icon(Icons.arrow_back)),
      IconButton(onPressed: onNext, icon: const Icon(Icons.arrow_forward)),
    ],
  ),
)

Translations

AwesomeStepper(
  nextLabel: 'Weiter',
  backLabel: 'Zurück',
  finishLabel: 'Fertig',
  semanticsLabel: (step, total, label) => 'Schritt $step von $total: $label',
  steps: steps,
)

Options

Parameter	Default
`headerType`	`circle`	`circle`, `bar`, `dots`, `numbered`
`headerColor` / `progressColor`	theme	header background / accent
`headerStyle` / `progressStyle`	theme	title / counter text styles
`headerHeight` / `controllerHeight`	72 (88 numbered) / 48
`contentAnimationDuration`	300 ms	page slide
`headerAnimationDuration` / `progressBarAnimationDuration`	250 ms / 1 s
`swipeEnabled` / `keyboardEnabled` / `hapticsEnabled`	`true`
`sideBySideMinWidth`	840	`null` = never side by side
`sideListWidth`	300	when there is no fold

Upgrading from 0.x

Existing code keeps working. The default look is now Material 3 (theme colors instead of white / red / green); pass headerColor and progressColor to keep your colors. AwesomeStepperItem is const, onStepChanged is ValueChanged<int>.

Keywords

Flutter stepper · step progress indicator · horizontal stepper · wizard · multi-step form · onboarding flow · checkout flow · form validation · progress bar · Material 3 stepper.

Issues and ideas: GitHub.

About the author

Made with ❤️ by Muhammed Şamil Demir, Flutter & iOS developer and founder of Monsware. Free and open source (see LICENSE).

🌐 Website: monsware.com · GitHub: @msaadev
📱 Apps by Monsware: Triangle Calculator · Circle Calculator
📦 More Flutter packages: awesome_stepper · regex_ui · fold_kit
💼 Need a Flutter or iOS app built? Get in touch

If this package saves you time, a ⭐ on GitHub and a 👍 on pub.dev help a lot.