Form Stepper / Wizard

Estimated reading: 4 minutes 22 views

FlutKit provides flexible Stepper / Wizard components to build multi-step forms with clear progress indication and customizable navigation. These components are ideal for onboarding flows, registration wizards, checkout processes, and complex data entry scenarios.

FlutKit supports:

  • Horizontal Form Stepper
  • Vertical Form Stepper
  • Vertical Stepper with 2-Column Layout

All steppers share a consistent API and support custom headers, colors, actions, and completion callbacks.

Common Concepts

StepData

Each step is defined using the StepData model.

Dart
StepData(
  title: 'Step Title',
  content: Widget,
)

Properties:

  • title — Displayed step title
  • content — Widget rendered for the step body

Horizontal Form Stepper

The Horizontal Stepper is suitable for desktop dashboards and wide layouts where steps are displayed in a row at the top.

Constructor

Dart
CustomHorizontalStepper({
  Key? key,
  required List<StepData> steps,
  Color? headerColor,
  Color? headerBgColor,
  HeaderStyle headerStyle = HeaderStyle.simple,
  void Function()? onFinish,
  Widget Function(BuildContext, int, void Function(), void Function())? actionBuilder,
  double? headerFontSize,
  FontWeight? headerFontWeight,
  Color? headerTextColor,
  Color? inactiveColor,
  Color? lineColor,
  Color? nextButtonColor,
  Color? prevButtonColor,
})

Example Implementation

Dart
CustomHorizontalStepper(
  headerColor: kPrimaryColor,
  headerTextColor: themeData.colorScheme.primary,
  headerBgColor: kSecondaryColor,
  headerStyle: HeaderStyle.detailed,
  onFinish: () {},
  steps: [
    StepData(
      title: 'Seller Details',
      content: sellerDetails(),
    ),
    StepData(
      title: 'Company Document',
      content: companyDocument(),
    ),
    StepData(
      title: 'Bank Details',
      content: bankDetailsForm(),
    ),
    StepData(
      title: 'Confirmation',
      content: confirmationForm(),
    ),
  ],
)

Use Cases

  • Multi-step registration forms
  • Business onboarding flows
  • Checkout and payment processes

Demo

Forms → Wizard

Complete source code, see: HorizontalStepperFormExample() in /lib/views/screens/form/form_wizard_screen.dart

Vertical Form Stepper

The Vertical Stepper stacks steps vertically, making it suitable for narrow layouts and mobile-friendly designs.

Constructor

Dart
CustomVerticalStepper({
  Key? key,
  required List<StepData> steps,
  Color? headerColor,
  Color? headerBgColor,
  HeaderStyle headerStyle = HeaderStyle.simple,
  void Function()? onFinish,
  Widget Function(BuildContext, int, void Function(), void Function())? actionBuilder,
  double? headerFontSize,
  FontWeight? headerFontWeight,
  Color? headerTextColor,
  Color? inactiveColor,
  Color? lineColor,
  Color? nextButtonColor,
  Color? prevButtonColor,
})

Example Implementation

Dart
CustomVerticalStepper(
  headerColor: kInfoColor,
  headerTextColor: kInfoColor,
  headerBgColor: kInfoColor,
  headerStyle: HeaderStyle.detailed,
  nextButtonColor: kSecondaryColor,
  onFinish: () {},
  steps: [
    StepData(
      title: 'Seller Details',
      content: sellerDetails(),
    ),
    StepData(
      title: 'Company Document',
      content: companyDocument(),
    ),
    StepData(
      title: 'Bank Details',
      content: bankDetailsForm(),
    ),
    StepData(
      title: 'Confirmation',
      content: confirmationForm(),
    ),
  ],
)

Use Cases

  • Mobile-first forms
  • Settings configuration flows
  • Sequential data collection

Demo

Forms → Wizard

Complete source code, see: VerticalStepperFormExample() in /lib/views/screens/form/form_wizard_screen.dart

Vertical Stepper (2 Columns)

The 2-Column Vertical Stepper separates the step navigation and content into two columns, providing better readability for complex forms.

Constructor

Dart
CustomVerticalStepper2Column({
  Key? key,
  required List<StepData> steps,
  Color? headerColor,
  Color? headerBgColor,
  HeaderStyle headerStyle = HeaderStyle.simple,
  void Function()? onFinish,
  Widget Function(BuildContext, int, void Function(), void Function())? actionBuilder,
  double? headerFontSize,
  FontWeight? headerFontWeight,
  Color? headerTextColor,
  Color? inactiveColor,
  Color? lineColor,
  Color? nextButtonColor,
  Color? prevButtonColor,
  bool allowStepTap = false,
})

Example Implementation

Dart
CustomVerticalStepper2Column(
  headerColor: kPrimaryColor,
  headerTextColor: themeData.colorScheme.primary,
  headerBgColor: kSecondaryColor,
  headerStyle: HeaderStyle.detailed,
  onFinish: () {},
  steps: [
    StepData(
      title: 'Seller Details',
      content: sellerDetails(),
    ),
    StepData(
      title: 'Company Document',
      content: companyDocument(),
    ),
    StepData(
      title: 'Bank Details',
      content: bankDetailsForm(),
    ),
    StepData(
      title: 'Confirmation',
      content: confirmationForm(),
    ),
  ],
)

Use Cases

  • Enterprise-level forms
  • Long, data-heavy workflows
  • Desktop dashboards

Demo

Forms → Wizard

Complete source code, see: VerticalStepper2ColumnFormExample() in /lib/views/screens/form/form_wizard_screen.dart

Best Practices

  • Group related fields into a single step
  • Validate each step before moving forward
  • Use HeaderStyle.detailed for better progress clarity
  • Keep step titles short and descriptive
  • Prefer 2-column stepper for large forms
Share this Doc

Form Stepper / Wizard

Or copy link

CONTENTS