apptomate_custom_stepper 0.0.1

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

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)

---