Flutter Stepper Widget Example – Create Multi-Step Forms Easily | PradeeptheDeveloper

Flutter Stepper Widget Example – Create Multi-Step Forms Easily

Flutter provides powerful built-in widgets for crafting interactive UIs, and one such widget is the Stepper. It’s commonly used to build multi-step forms, onboarding flows, and guided user experiences.

In this tutorial, we’ll walk through how to create a simple 3-step form using the Stepper widget in Flutter.

What is a Flutter Stepper?

The Stepper widget allows users to progress through a series of steps, typically used in forms or processes where input is required at multiple stages.

Features You'll Learn:

How to use Stepper widget in Flutter
Manage step navigation (next, back, tap to jump)
Highlight the current step
Build a clean multi-step form interface

Complete Flutter Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: StepperExample()));
}

class StepperExample extends StatefulWidget {
  @override
  _StepperExampleState createState() => _StepperExampleState();
}

class _StepperExampleState extends State<StepperExample> {
  int _currentStep = 0;

  List<Step> get _steps => [
    Step(
      title: Text('Step 1'),
      content: Text('Enter your name'),
      isActive: _currentStep >= 0,
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Enter your email'),
      isActive: _currentStep >= 1,
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Confirm details'),
      isActive: _currentStep >= 2,
    ),
  ];

  void _onStepContinue() {
    if (_currentStep < _steps.length - 1) {
      setState(() => _currentStep += 1);
    }
  }

  void _onStepCancel() {
    if (_currentStep > 0) {
      setState(() => _currentStep -= 1);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter Stepper Example")),
      body: Stepper(
        currentStep: _currentStep,
        onStepContinue: _onStepContinue,
        onStepCancel: _onStepCancel,
        onStepTapped: (step) => setState(() => _currentStep = step),
        steps: _steps,
      ),
    );
  }
}

How It Works

_currentStep tracks the active step.
_steps contains the list of all steps with title, content, and active state.
onStepContinue and onStepCancel handle navigation logic.
onStepTapped allows users to tap a step to jump directly.

Output

You can navigate forward, backward, or tap a step directly.

Use Cases:

Registration forms
Checkout processes
Onboarding tutorials
Setup wizards

Final Thoughts

The Stepper widget is incredibly helpful for guiding users through complex forms or processes in a structured and interactive way. You can also customize it with horizontal orientation, validation logic, or integrate it with a Form.

Try expanding the above code by adding input fields and form validation to create real-world apps.

Need more UI tips with Flutter? Stay tuned for more blog posts like this one!

Flutter Stepper Widget Example – Create Multi-Step Forms Easily