Step Progress Indicator: A Comprehensive Guide for Flutter Developers

Published on by Flutter News Hub

Step Progress Indicator: A Comprehensive Guide for Flutter Developers

Overview

The Step Progress Indicator is a versatile Flutter package that offers a visually appealing and customizable way to display the progress of a task or journey. It consists of a series of steps, each representing a stage in the process. By customizing its parameters, you can easily tailor it to meet your specific design requirements.

Installation and Import

To integrate the Step Progress Indicator into your Flutter project, follow these steps:

  1. Add the dependency to your pubspec.yaml file:
dependencies:
  flutter:
    sdk: flutter
  step_progress_indicator: ^1.0.2
  1. Import the package into your Dart file:
import 'package:step_progress_indicator/step_progress_indicator.dart';

Parameters

The Step Progress Indicator provides a wide range of parameters to fine-tune its appearance and behavior:


Parameter Type Description Default
| totalSteps  | int  | Total number of steps in the indicator.  | Required
| currentStep  | int  | Number of steps to highlight.  | 0
| customStep  | Widget Function(int, Color, double)  | Custom widget to display at each step.  | -
| gradientColor  | Gradient  | Apply a gradient color to the indicator.  | -
| selectedGradientColor  | Gradient  | Apply a gradient color to the selected steps.  | -
| selectedColor  | Color  | Color of the selected steps.  | Colors.blue
| unselectedColor  | Color  | Color of the unselected steps.  | Colors.grey
| direction  | Axis  | Horizontal or vertical orientation.  | Axis.horizontal
| size  | double  | Size of the indicator.  | 4.0
| padding  | double  | Spacing between steps.  | 2.0
| roundedEdges  | Radius  | Add rounded edges to the first and last step.  | -

Examples

Example 1: Basic Usage

StepProgressIndicator(
  totalSteps: 10,
  currentStep: 6,
)

Example 2: Custom Colors and Gradients

StepProgressIndicator(
  totalSteps: 10,
  currentStep: 6,
  selectedColor: Colors.red,
  unselectedColor: Colors.yellow,
  gradientColor: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.orange, Colors.white],
  ),
)

Example 3: Custom Step Widgets

StepProgressIndicator(
  totalSteps: 10,
  currentStep: 6,
  customStep: (index, color, size) => Container(
    color: color,
    child: Icon(
      Icons.check,
      color: Colors.white,
    ),
  ),
)

Example 4: Circular Step Progress Indicator

CircularStepProgressIndicator(
  totalSteps: 10,
  currentStep: 6,
  width: 100,
)

Example 5: Circular Step Progress Indicator with Custom Colors

CircularStepProgressIndicator(
  totalSteps: 10,
  currentStep: 6,
  selectedColor: Colors.red,
  unselectedColor: Colors.grey,
)

Roadmap and Support

The Step Progress Indicator is actively maintained and open to suggestions and contributions. If you have any feature requests or improvements, feel free to create a pull request or open an issue.

If you appreciate this package and wish to support my work, you can buy me a coffee. Your support fuels my motivation to continue developing and maintaining high-quality Flutter packages.

Conclusion

The Step Progress Indicator is a versatile and customizable tool that can enhance the user experience of your Flutter applications. By leveraging its parameters, you can create visually appealing and informative progress indicators tailored to your design specifications. Whether you need a simple linear indicator or a more complex circular one, this package offers a comprehensive solution that is easy to integrate and use.

Flutter News Hub