Stepper

A multi-step progress indicator for wizards and multi-page forms.

Basic Usage

Account
Profile
Settings
Complete
dart
1
2
3
4
5
6
7
8
9
DStepper(
  currentStep: 1,
  steps: [
    DStepItem(title: 'Account'),
    DStepItem(title: 'Profile'),
    DStepItem(title: 'Settings'),
    DStepItem(title: 'Complete'),
  ],
)

Horizontal (Default)

Cart
Shipping
Payment
Confirm
dart
1
2
3
4
5
6
7
8
9
10
DStepper(
  orientation: DStepperOrientation.horizontal,
  currentStep: 2,
  steps: [
    DStepItem(title: 'Cart'),
    DStepItem(title: 'Shipping'),
    DStepItem(title: 'Payment'),
    DStepItem(title: 'Confirm'),
  ],
)

Vertical

Create Account Enter your email and password
Verify Email Check your inbox for verification link
Complete Profile Add your personal information
Get Started Start using the platform
dart
1
2
3
4
5
6
7
8
9
10
DStepper(
  orientation: DStepperOrientation.vertical,
  currentStep: 1,
  steps: [
    DStepItem(title: 'Create Account', description: 'Enter your email and password'),
    DStepItem(title: 'Verify Email', description: 'Check your inbox for verification link'),
    DStepItem(title: 'Complete Profile', description: 'Add your personal information'),
    DStepItem(title: 'Get Started', description: 'Start using the platform'),
  ],
)

With Descriptions

Personal Info Name, email, phone
Address Shipping and billing
Payment Credit card or PayPal
Review Confirm your order
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
DStepper(
  currentStep: 0,
  steps: [
    DStepItem(
      title: 'Personal Info',
      description: 'Name, email, phone',
    ),
    DStepItem(
      title: 'Address',
      description: 'Shipping and billing',
    ),
    DStepItem(
      title: 'Payment',
      description: 'Credit card or PayPal',
    ),
    DStepItem(
      title: 'Review',
      description: 'Confirm your order',
    ),
  ],
)

With Custom Icons

Cart
Shipping
Payment
Done
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
DStepper(
  currentStep: 1,
  steps: [
    DStepItem(
      title: 'Cart',
      icon: DIcon(name: DIconNames.shoppingCart, size: DIconSize.sm),
    ),
    DStepItem(
      title: 'Shipping',
      icon: DIcon(name: DIconNames.truck, size: DIconSize.sm),
    ),
    DStepItem(
      title: 'Payment',
      icon: DIcon(name: DIconNames.creditCard, size: DIconSize.sm),
    ),
    DStepItem(
      title: 'Done',
      icon: DIcon(name: DIconNames.package, size: DIconSize.sm),
    ),
  ],
)

Step States

Steps have three states: Upcoming (gray, numbered), Current (indigo, numbered), and Completed (green, checkmark).

Step 1
Step 2
Step 3
Step 4
dart
1
2
3
4
5
6
7
8
9
DStepper(
  currentStep: 2,  // Steps 0 and 1 are completed, step 2 is current
  steps: [
    DStepItem(title: 'Step 1'),  // Completed (green check)
    DStepItem(title: 'Step 2'),  // Completed (green check)
    DStepItem(title: 'Step 3'),  // Current (indigo)
    DStepItem(title: 'Step 4'),  // Upcoming (gray)
  ],
)

Clickable Steps

Allow users to navigate by clicking on steps.

Details
Options
Review
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
DStepper(
  currentStep: currentStep,
  clickable: true,
  onStepClick: (index) {
    // Only allow clicking on completed or current steps
    if (index <= currentStep) {
      setState(() => currentStep = index);
    }
  },
  steps: [
    DStepItem(title: 'Details'),
    DStepItem(title: 'Options'),
    DStepItem(title: 'Review'),
  ],
)

Registration Flow Example

Create Account Set up your login credentials
Verify Email Confirm your email address
Choose Plan Select your subscription
Complete Setup Configure your workspace
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
DStepper(
  orientation: DStepperOrientation.vertical,
  currentStep: registrationStep,
  steps: [
    DStepItem(
      title: 'Create Account',
      description: 'Set up your login credentials',
      icon: DIcon(name: DIconNames.userPlus, size: DIconSize.sm),
    ),
    DStepItem(
      title: 'Verify Email',
      description: 'Confirm your email address',
      icon: DIcon(name: DIconNames.mail, size: DIconSize.sm),
    ),
    DStepItem(
      title: 'Choose Plan',
      description: 'Select your subscription',
      icon: DIcon(name: DIconNames.creditCard, size: DIconSize.sm),
    ),
    DStepItem(
      title: 'Complete Setup',
      description: 'Configure your workspace',
      icon: DIcon(name: DIconNames.settings, size: DIconSize.sm),
    ),
  ],
)

API Reference

DStepper

Prop Type Default Description
steps List<DStepItem> required Step items
currentStep int 0 Active step index (0-based)
orientation DStepperOrientation horizontal Layout orientation
clickable bool false Allow clicking steps
onStepClick ValueChanged<int>? null Step click callback
classes String? null Custom CSS classes

DStepItem

Prop Type Default Description
title String required Step title
description String? null Step description
icon Component? null Custom icon

DStepperOrientation

Value Description
horizontal Horizontal layout
vertical Vertical layout

DStepStatus

Value Description
upcoming Future step (gray)
current Active step (indigo)
completed Past step (green check)