flow_stepper_widget 0.0.6

A lightweight, highly-customizable Flutter stepper/indicator widget with modern design and full styling control.

Flow Stepper Widget

A lightweight, highly-customizable Flutter stepper/indicator widget with modern design and full styling control.

Screenshots

Features

• Vertical and horizontal layouts with flexible label positioning
• Customizable step indicators and labels
• Animated state transitions with configurable duration
• Dashed or solid connecting lines with adjustable thickness
• RTL/LTR support for internationalization
• Full accessibility support with semantic labels
• Material Design 3 ready
• Extensive customization options for colors, sizes, and shapes
• Support for custom builders for indicators, labels, and icons
• Custom line painter support for advanced line styling

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flow_stepper_widget: any

Usage

import 'package:flow_stepper_widget/flow_stepper_widget.dart';

FlowStepperWidget(
  steps: [
    FlowStep(
      id: 'step1',
      label: 'Step 1',
      icon: Icons.check,
      active: true,
    ),
    FlowStep(
      id: 'step2',
      label: 'Step 2',
      icon: Icons.check,
      active: false,
    ),
    // Add more steps...
  ],
  direction: Axis.vertical,
  labelType: LabelType.vertical,
  labelOrderType: LabelOrderType.start,
)

Customization Options

Basic Properties

• steps: List of steps to display
• direction: Layout direction (vertical or horizontal)
• labelType: Label fitting type
• labelOrderType: Label order type
• spacing: Spacing between steps
• reverse: Whether to reverse the order of steps

Styling

• activeStepColor: Color for active steps
• inactiveStepColor: Color for inactive steps
• disabledStepColor: Color for disabled steps
• stepIconSize: Size for step icons
• stepTextStyle: Text style for step labels
• stepShape: Shape for step containers
• stepPadding: Padding for step containers

Line Customization

• lineActiveColor: Active color of connecting lines
• lineInactiveColor: Inactive color of connecting lines
• lineThickness: Thickness of connecting lines
• dashPattern: Pattern for dashed lines
• showLines: Whether to show connecting lines
• linePainter: Custom painter for connecting lines

Callbacks

• onStepTap: Callback when a step is tapped
• onStepLongPress: Callback when a step is long-pressed

Custom Builders

• indicatorBuilder: Custom builder for step indicators
• labelBuilder: Custom builder for step labels (function signature: Widget Function(dynamic, dynamic)). Acts as a fallback for every step; a step-level FlowStep.labelBuilder takes precedence
• stepIconBuilder: Custom builder for step icons

Label Options

The FlowStep class now supports flexible label options:

• String labels: Traditional text labels using the label parameter
• Custom widgets: Use labelBuilder to create custom label widgets
• No labels: Omit both label and labelBuilder to show an empty Text widget

Priority order: labelBuilder takes precedence over label. If both are null, an empty Text widget is displayed.

Note: The labelBuilder function signature is Widget Function(dynamic, dynamic) where the first parameter is typically the BuildContext and the second parameter is the FlowStep object.

Animation

• stepAnimationDuration: Animation duration for state changes

Localization

• textDirection: Text direction for RTL/LTR support. Defaults to the ambient Directionality, falling back to LTR; pass it explicitly to override

Example

FlowStepperWidget(
  steps: [
    FlowStep(
      id: 'step1',
      label: 'First Step',
      icon: Icons.check,
      active: true,
      enabled: true,
    ),
    FlowStep(
      id: 'step2',
      label: 'Second Step',
      icon: Icons.check,
      active: false,
      enabled: true,
    ),
    // Step with custom labelBuilder
    FlowStep(
      id: 'step3',
      labelBuilder: (context, step) => Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.blue.shade100,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(
          'Custom Label',
          style: TextStyle(color: Colors.blue.shade800),
        ),
      ),
      icon: Icons.star,
      active: false,
    ),
    // Step with no label (shows empty Text)
    FlowStep(
      id: 'step4',
      icon: Icons.radio_button_unchecked,
      active: false,
    ),
  ],
  direction: Axis.vertical,
  labelType: LabelType.vertical,
  labelOrderType: LabelOrderType.start,
  spacing: 24.0,
  activeStepColor: Colors.blue,
  inactiveStepColor: Colors.grey,
  stepIconSize: 32.0,
  onStepTap: (id, newState) {
    // Handle step tap
  },
)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.