ArcaneSteps#

A numbered steps component for showing progress through a multi-step process. Supports horizontal and vertical layouts with clickable navigation.

Aliases: ArcaneSteps, ASteps

Basic Usage#

ArcaneSteps(
  items: [
    ArcaneStepItem(
      title: 'Account',
      description: 'Create your account',
      status: StepStatus.complete,
    ),
    ArcaneStepItem(
      title: 'Profile',
      description: 'Set up your profile',
      status: StepStatus.current,
    ),
    ArcaneStepItem(
      title: 'Complete',
      description: 'Start using the app',
      status: StepStatus.pending,
    ),
  ],
)

Properties#

ArcaneStepItem Properties#

Layouts#

Horizontal (Default)#

ArcaneSteps.horizontal(
  items: [
    ArcaneStepItem(title: 'Cart', status: StepStatus.complete),
    ArcaneStepItem(title: 'Shipping', status: StepStatus.current),
    ArcaneStepItem(title: 'Payment', status: StepStatus.pending),
    ArcaneStepItem(title: 'Confirm', status: StepStatus.pending),
  ],
)

Vertical#

ArcaneSteps.vertical(
  items: [
    ArcaneStepItem(
      title: 'Account',
      description: 'Create your account',
      status: StepStatus.complete,
    ),
    ArcaneStepItem(
      title: 'Profile',
      description: 'Set up your profile',
      status: StepStatus.current,
    ),
    ArcaneStepItem(
      title: 'Preferences',
      description: 'Configure settings',
      status: StepStatus.pending,
    ),
    ArcaneStepItem(
      title: 'Complete',
      description: 'Start using the app',
      status: StepStatus.pending,
    ),
  ],
)

Using currentStep#

Instead of setting status on each item, use currentStep for automatic status:

ArcaneSteps(
  currentStep: 1, // 0-indexed: first step complete, second current
  items: [
    ArcaneStepItem(title: 'Account'),
    ArcaneStepItem(title: 'Profile'),
    ArcaneStepItem(title: 'Settings'),
    ArcaneStepItem(title: 'Complete'),
  ],
)

Clickable Steps#

Enable navigation by tapping completed steps:

ArcaneSteps(
  currentStep: currentStep,
  onStepTap: (index) {
    // Navigate back to a previous step
    setState(() => currentStep = index);
  },
  items: [
    ArcaneStepItem(title: 'Account'),
    ArcaneStepItem(title: 'Profile'),
    ArcaneStepItem(title: 'Settings'),
    ArcaneStepItem(title: 'Complete'),
  ],
)

Status Types#

// Complete (green checkmark)
ArcaneStepItem(title: 'Done', status: StepStatus.complete)

// Current (accent color with number)
ArcaneStepItem(title: 'In Progress', status: StepStatus.current)

// Pending (muted, shows number)
ArcaneStepItem(title: 'Upcoming', status: StepStatus.pending)

Sizes#

// Small
ArcaneSteps(size: StepsSize.sm, items: [...])

// Medium (default)
ArcaneSteps(size: StepsSize.md, items: [...])

// Large
ArcaneSteps(size: StepsSize.lg, items: [...])

Examples#

Checkout Flow#

class CheckoutSteps extends StatefulComponent {
  @override
  State createState() => _CheckoutStepsState();
}

class _CheckoutStepsState extends State<CheckoutSteps> {
  int _currentStep = 0;

  @override
  Component build(BuildContext context) {
    return ArcaneColumn(
      gapSize: Gap.lg,
      children: [
        ArcaneSteps(
          currentStep: _currentStep,
          onStepTap: (index) => setState(() => _currentStep = index),
          items: const [
            ArcaneStepItem(title: 'Cart'),
            ArcaneStepItem(title: 'Shipping'),
            ArcaneStepItem(title: 'Payment'),
            ArcaneStepItem(title: 'Confirm'),
          ],
        ),
        // Step content
        if (_currentStep == 0) CartContent(),
        if (_currentStep == 1) ShippingContent(),
        if (_currentStep == 2) PaymentContent(),
        if (_currentStep == 3) ConfirmContent(),
        // Navigation
        ArcaneRow(
          gapSize: Gap.sm,
          children: [
            if (_currentStep > 0)
              ArcaneButton.outline(
                label: 'Previous',
                onPressed: () => setState(() => _currentStep--),
              ),
            ArcaneButton.primary(
              label: _currentStep == 3 ? 'Complete Order' : 'Next',
              onPressed: () {
                if (_currentStep < 3) {
                  setState(() => _currentStep++);
                } else {
                  // Complete order
                }
              },
            ),
          ],
        ),
      ],
    );
  }
}

Registration Wizard#

ArcaneSteps.vertical(
  items: [
    ArcaneStepItem(
      title: 'Create Account',
      description: 'Enter your email and password',
      status: StepStatus.complete,
      content: ArcaneDiv(
        styles: const ArcaneStyleData(padding: PaddingPreset.md),
        children: [
          ArcaneText('Email verified!', color: TextColor.success),
        ],
      ),
    ),
    ArcaneStepItem(
      title: 'Personal Info',
      description: 'Tell us about yourself',
      status: StepStatus.current,
    ),
    ArcaneStepItem(
      title: 'Preferences',
      description: 'Customize your experience',
      status: StepStatus.pending,
    ),
  ],
)

Form Wizard with Validation#

ArcaneSteps(
  currentStep: _step,
  items: [
    ArcaneStepItem(
      title: 'Basic Info',
      description: _step > 0 ? 'Completed' : 'Fill in your details',
    ),
    ArcaneStepItem(
      title: 'Contact',
      description: _step > 1 ? 'Completed' : 'How can we reach you?',
    ),
    ArcaneStepItem(
      title: 'Review',
      description: 'Confirm your information',
    ),
  ],
)

Accessibility#

The component includes:

• Button elements for clickable steps
• Disabled state for non-clickable steps
• Visual indicators for current and completed states
• Keyboard navigation support

Related Components#

• ArcaneTimeline - Chronological event display
• ArcaneProgressBar - Progress indicator
• ArcaneTabs - Tabbed content