CustomStepper

An enhanced, fully customizable stepper widget for Flutter that provides a multi-step form workflow with validation support, customizable colors, and button labels.

Features

  • Customizable UI:
    • Configurable active/inactive/completed step colors
    • Customizable button labels ("Next"/"Back")
    • Flexible step content with Form validation
  • Interactive Controls:
    • Step tapping navigation
    • Continue/Cancel callbacks
    • Built-in form validation between steps
  • Flexible Configuration:
    • Dynamic step generation
    • State management for current step
    • Custom content for each step

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_stepper: ^0.0.1

Basic Usage

CustomStepper(
  currentStep: 0,
  steps: [
    Step(title: Text('Step 1'), content: Text('Content 1')),
    Step(title: Text('Step 2'), content: Text('Content 2')),
  ],
  onStepContinue: () => print('Continue'),
  onStepCancel: () => print('Back'),
)

Complete Example

CustomStepper(
  currentStep: _currentStep,
  nextBtnName: "Proceed",
  backBtnName: "Previous",
  activeColor: Colors.purple,
  completedColor: Colors.teal,
  inactiveColor: Colors.grey[300],
  onStepTapped: (step) => setState(() => _currentStep = step),
  onStepContinue: _validateAndContinue,
  onStepCancel: () => setState(() => _currentStep--),
  steps: [
    Step(
      title: Text('Account'),
      content: AccountForm(),
      isActive: _currentStep == 0,
    ),
    Step(
      title: Text('Profile'),
      content: ProfileForm(),
      isActive: _currentStep == 1,
    ),
  ],
)

Parameters

Parameter Type Default Description
steps List<Step> Required List of steps to display
currentStep int Required Current active step index
onStepTapped ValueChanged<int>? null Callback when step is tapped
onStepContinue VoidCallback? null Continue button handler
onStepCancel VoidCallback? null Back button handler
activeColor Color Colors.blue Color for active step
inactiveColor Color Colors.grey Color for inactive steps
completedColor Color Colors.green Color for completed steps
nextBtnName String? "Next" Custom continue button text
backBtnName String? "Back" Custom back button text

Validation Pattern

The included example demonstrates a common validation pattern:

void _onStepContinue() {
  if (_currentStep == 0 && _formKey1.currentState!.validate()) {
    setState(() => _currentStep++);
  } 
  else if (_currentStep == 1 && _formKey2.currentState!.validate()) {
    setState(() => _currentStep++);
  }
}

Customization Options

  1. Button Styling:

    controlsBuilder: (context, details) {
  return Row(
    children: [
      FilledButton(...),  // Custom continue button
      TextButton(...),    // Custom back button
    ],
  );
}

  2. Step Indicators:

    state: StepState.complete,  // Customize per step

  3. Responsive Layout:

    Stepper(
  type: StepperType.horizontal,  // Vertical by default
  ...
)

Best Practices

  1. Form Management:

    • Use separate GlobalKey<FormState> for each step
    • Validate before proceeding to next step

  2. State Management:

    • Consider using state management solutions for complex flows
    • Persist form data between steps

  3. Accessibility:

    • Provide meaningful step titles
    • Ensure proper color contrast

Dependencies

  • Flutter SDK (requires material.dart)

Libraries

apptomate_custom_stepper