StepProgress #

StepProgress is a lightweight package designed to display step progress indicators for completing multi-step tasks in a user interface. It provides customizable widgets to visually represent the progress of a task, making it easier for users to understand their current position and the steps remaining.

Features #

• Visual Step Indication: Clearly displays progress through a sequence of steps, available in both horizontal and vertical orientations.

• Theming and Customization:

  • Comprehensive Theme: Easily customize the look and feel using StepProgressThemeData, controlling colors, text styles, and border properties.
  • Step Sizing: Adjust the size of step nodes with stepSize.
  • Titles and Subtitles: Add descriptive labels to each step for enhanced user understanding.
  • Visibility Control: Show or hide titles, subtitles, and connecting lines using StepProgressVisibilityOptions.
  • Custom Icons: Utilize custom icons for step nodes, with separate options for inactive and active states using nodeIconBuilder and nodeActiveIconBuilder.

• Interactive Elements:

  • Step Tapping: Enable user interaction with steps using onStepNodeTapped callbacks.
  • Line Tapping: Provide actions when users tap on the lines connecting steps with onStepLineTapped.
  • Step Change Notification: Receive callbacks with onStepChanged when the current step is updated.

• Programmatic Control:

  • StepProgressController: Manage the current step externally, allowing integration with your application's logic.
  • Initial Step: Set the starting step with the currentStep property.

• Flexible Layout:

  • Dimensions: Control the width and height of the widget.
  • Spacing: Adjust margins and padding for optimal visual placement.

Showcases #

Example 1: Vertical Step Progress #

Implementation

dart
StepProgress(
  totalSteps: 4,
  controller: stepProgressController,
  axis: Axis.vertical,
  titles: const ['step 1', 'step 2', 'step 3', 'step 4'],
  onStepChanged: (index) {
    debugPrint('on step changed: $index');
  },
  onStepNodeTapped: (index) {
    debugPrint('on step tapped with index: $index');
  },
  onStepLineTapped: (index) {
    debugPrint('on step line tapped with index: $index');
  },
),

Example 2: Horizontal Step Progress without Labels #

Implementation

StepProgress(
  totalSteps: 5,
  padding: const EdgeInsets.symmetric(horizontal: 24),
  controller: _stepProgressController,
  onStepChanged: (currentIndex) {
    setState(() {
      currentStep = currentIndex;
    });
  },
),

Example 3: Horizontal Step Progress without Nodes #

Implementation

StepProgress(
  totalSteps: 5,
  visibilityOptions: StepProgressVisibilityOptions.lineOnly,
  controller: stepProgressController,
  onStepChanged: (currentIndex) {
    debugPrint('onStepChanged: $currentIndex');
  },
  onStepLineTapped: (index) {
    debugPrint('onStepLineTapped: $index');
  },
  theme: const StepProgressThemeData(
    stepLineSpacing: 6,
    defaultForegroundColor: Color.fromARGB(255, 55, 55, 55),
    activeForegroundColor: Color.fromARGB(255, 105, 105, 105),
    highlightCompletedSteps: false,
    stepLineStyle: StepLineStyle(
      lineThickness: 9,
      borderRadius: BorderRadius.all(Radius.circular(2)),
    ),
  ),
),

Example 4: Horizontal Step Progress Line Mode - Customized #

Implementation

Row(
  children: [
    TextButton.icon(
      onPressed: stepProgressController.previousStep,
      label: const Text('PREV'),
      icon: const Icon(Icons.arrow_back_ios),
    ),
    Expanded(
      child: StepProgress(
        totalSteps: 5,
        visibilityOptions: StepProgressVisibilityOptions.lineOnly,
        controller: stepProgressController,
        theme: const StepProgressThemeData(
          defaultForegroundColor: Color(0xFFeeeee4),
          activeForegroundColor: Color(0xFF1A76D2),
        ),
      ),
    ),
    TextButton.icon(
      onPressed: stepProgressController.nextStep,
      label: const Text('NEXT'),
      icon: const Icon(Icons.arrow_forward_ios),
      iconAlignment: IconAlignment.end,
    ),
  ],
),

Example 5: Horizontal Step Progress Custom Node Icon #

Implementation

StepProgress(
  totalSteps: 4,
  margin: const EdgeInsets.symmetric(horizontal: 12),
  controller: stepProgressController,
  nodeIconBuilder: (index) {
    return Text(
      '${index + 1}',
      style: const TextStyle(fontSize: 24, color: Color(0xFFa2a2ab)),
    );
  },
  nodeActiveIconBuilder: (index) {
    return Text(
      '${index + 1}',
      style: const TextStyle(fontSize: 24, color: Color(0xFFb1acaa)),
    );
  },
  theme: const StepProgressThemeData(
    defaultForegroundColor: Colors.white,
    activeForegroundColor: Colors.white,
    borderWidth: 4,
    activeBorderColor: Color(0xFF2d9ada),
    borderColor: Color(0xFFdee0e2),
    stepLineStyle: StepLineStyle(lineThickness: 0),
  ),
),

Example 6: Horizontal Step Progress with Positioned Label #

Implementation

StepProgress(
  totalSteps: 4,
  controller: stepProgressController,
  titles: const ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
  theme: const StepProgressThemeData(
    stepLabelAlignment: StepLabelAlignment.topBottom,
    stepLineSpacing: 2,
    stepLineStyle: StepLineStyle(lineThickness: 2),
  ),
),

Example 7: Horizontal Step Progress Node Only #

Implementation

StepProgress(
  totalSteps: 4,
  controller: stepProgressController,
  visibilityOptions: StepProgressVisibilityOptions.nodeOnly,
  subTitles: const ['sub 1', 'sub 2', 'sub 3', 'sub 4'],
  padding: const EdgeInsets.all(18),
  theme: const StepProgressThemeData(
    stepLabelAlignment: StepLabelAlignment.right,
    labelStyle: StepLabelStyle(labelAxisAlignment: CrossAxisAlignment.start),
  ),
),

Installation #

To use StepProgress, add it to your pubspec.yaml file:

dependencies:
  step_progress: latest_version

Then, run the following command to install the package:

flutter pub get

Usage #

To use StepProgress in your Flutter app, first import the package:

import 'package:step_progress/step_progress.dart';

Initialize Your StepProgressController #

final _stepProgressController = StepProgressController(totalStep: 4);

Then Pass Your StepProgressController to the StepProgress Widget #

StepProgress(
  controller: _stepProgressController,
  totalSteps: 4,
  onStepChanged: (index) {
    debugPrint('on step changed: $index');
  },
),

StepProgressThemeData parameters #

StepNodeStyle Properties #

RippleEffectStyle Properties #

StepLineStyle Properties #

StepLabelStyle Properties #

Support the Package #

We appreciate your support for the StepProgress package! You can help us by:

• Liking the package on pub.flutter-io.cn.
• Starring the repository on GitHub.
• Reporting any issues or bugs you encounter here.

Your contributions and feedback are invaluable to us!

License #

StepProgress is released under the BSD-3-Clause License.

Contact Me 📨 #

Feel free to reach out to me through the following platforms:

I look forward to connecting with you!