multi_step_flow 0.1.0+1 copy "multi_step_flow: ^0.1.0+1" to clipboard
multi_step_flow: ^0.1.0+1 copied to clipboard

A platform-agnostic solution for managing multi-step flows with support for different flow types, validation, and customization.

multi_step_flow #

A platform-agnostic Dart package for managing multi-step flows with powerful state management, validation, and customization options.

Features #

  • Flexible Step Management: Define complex multi-step flows with custom step types
  • Powerful State Management: Built on bloc pattern for reliable state transitions
  • Validation Support: Built-in validation hooks for implementing custom validation rules
  • Lifecycle Events: Step-specific lifecycle events (onEnter, onExit, onSkip)
  • Configuration Options: Customize navigation behavior, validation timing, and more
  • Asynchronous API: Fully asynchronous API for smooth integration with UI

Getting Started #

Add multi_step_flow to your pubspec.yaml:

dependencies:
  multi_step_flow: ^1.0.0

Then run:

dart pub get

Usage #

Basic Flow Setup #

import 'package:multi_step_flow/multi_step_flow.dart';

void main() {
  // 1. Create your steps
  final steps = [
    YourCustomStep(id: 'step1', title: 'Step 1'),
    YourCustomStep(id: 'step2', title: 'Step 2'),
    YourCustomStep(id: 'step3', title: 'Step 3', isSkippable: true),
  ];

  // 2. Initialize the flow controller
  final controller = FlowController(
    steps: steps,
    configuration: const FlowConfiguration(
      validateOnStepChange: true,
    ),
  );

  // 3. Listen to state changes
  controller.stateStream.listen((state) {
    print('Current step: ${state.currentStep?.id}');
    print('Flow status: ${state.status}');
  });

  // 4. Navigate through steps
  controller.next(); // Move to next step
  controller.previous(); // Move to previous step
  controller.skip(); // Skip the current step (if skippable)
  controller.goToStep(2); // Jump to a specific step
}

Creating Custom Steps #

Create custom step types by extending the FlowStep abstract class:

class YourCustomStep extends FlowStep {
  YourCustomStep({
    required String id,
    String? title,
    String? description,
    bool isSkippable = false,
    Duration? timeLimit,
    Map<String, dynamic>? data,
  }) : super(
          id: id,
          title: title,
          description: description,
          isSkippable: isSkippable,
          timeLimit: timeLimit,
          data: data,
        );

  @override
  Future<bool> validate() async {
    // Implement your validation logic here
    return _isValid;
  }

  @override
  Future<void> onEnter() async {
    // Called when step becomes active
    print('Entering step $id');
  }

  @override
  Future<void> onExit() async {
    // Called when leaving step
    print('Exiting step $id');
  }

  @override
  Future<void> onSkip() async {
    // Called when step is skipped
    print('Skipping step $id');
  }

  @override
  FlowStep copyWith({
    String? id,
    String? title,
    String? description,
    bool? isSkippable,
    Duration? timeLimit,
    Map<String, dynamic>? data,
  }) {
    return YourCustomStep(
      id: id ?? this.id,
      title: title ?? this.title,
      description: description ?? this.description,
      isSkippable: isSkippable ?? this.isSkippable,
      timeLimit: timeLimit ?? this.timeLimit,
      data: data ?? this.data,
    );
  }
}

Configuring Flow Behavior #

final controller = FlowController(
  steps: steps,
  configuration: const FlowConfiguration(
    // Navigation behavior
    allowBackNavigation: true,
    
    // Validation behavior
    autoAdvanceOnValidation: true,
    validateOnStepChange: true,
    
    // UI configuration (for integrating with widgets)
    showStepIndicator: true,
    
    // State management
    preserveState: true,
    
    // Timing (for timed steps)
    defaultStepDuration: Duration(seconds: 30),
    
    // Callbacks
    onFlowComplete: () async {
      print('Flow completed!');
    },
  ),
);

Advanced Usage #

Check the /example folder for more detailed examples including:

  • Registration flow with validation
  • Step lifecycle event handling
  • Flow state management
  • Error handling

Additional Information #

This package is designed to work seamlessly with the multi_step_widgets package for Flutter UI components, but can be used independently in any Dart project.

1
likes
0
points
1
downloads

Publisher

unverified uploader

Weekly Downloads

A platform-agnostic solution for managing multi-step flows with support for different flow types, validation, and customization.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

bloc, equatable, formz, meta

More

Packages that depend on multi_step_flow