Vertical Steps Indicator Widget

A Flutter package for customizable steps indicators, perfect for visualizing multi-step processes in your app.

What's New in Version 0.0.2

🚀 New Features

  • Dynamic Step Items: Introduced StepItemModel for flexible step customization. Each step can now include:

    • A title widget.
    • Up to two subtitle widgets (subtitle1, subtitle2).
    • Custom content widget for tailored designs.

  • Custom Indicators:

    • selectedIndicator: Customize the current step's indicator.
    • normalIndicator: Override the appearance of non-current indicators.

🛠 Improvements

  • Indicator Type Control: Added IndicatorType enum to specify:

    • onlyCurrent: Highlights only the current step.
    • previous: Highlights the current and all previous steps.

  • Dynamic Step Heights: Added stepItemHeight for precise control over step item dimensions.

✨ Enhancements

  • Steps Refactor: Updated steps to use List<StepItemModel> for increased flexibility.
  • Error Handling: Throws an error if neither title nor contents is provided in a StepItemModel.

Features

  • Default Steps Indicator: Simple and clean indicator design.
  • Dashed Steps Indicator: Stylish dashed lines for a modern look.
  • Customizable Colors: Easily set custom indicator, background, and border colors.
  • Flexible Layout: Supports dynamic steps and current step customization.

Installation

Add the package to your pubspec.yaml file:

dependencies:
  vertical_steps_indicator: ^0.0.2

Then run:

flutter pub get

Usage

Here is an example of how to use the StepsIndicatorWidget:

Basic Example

Basic Example

StepsIndicatorWidget(
  steps: [
    StepItemModel(title: Text('Step 1')),
    StepItemModel(title: Text('Step 2')),
    StepItemModel(contents: Text('Custom Step Content')),
  ],
  currentStep: 1,
)

Dashed Line Example

Dashed Example

StepsIndicatorWidget(
  steps: [
    StepItemModel(title: Text('Step 1')),
    StepItemModel(
        title: Text('Step 2'),
        subtitle1: Text('Subtitle to step 2')),
    StepItemModel(
        title: Text('Step 3'),
        subtitle1: Text('Subtitle to step 3'),
        subtitle2: Text('Subtitle 2 to step 3')),
  ],
  currentStep: 1,
  lineType: LineType.dashed,
  indicatorType: IndicatorType.previous,
),

Advanced Example

Advanced Example

StepsIndicatorWidget(
  steps: [
    StepItemModel(title: Text('Step 1'), subtitle1: Text('Start Here')),
    StepItemModel(title: Text('Step 2'), subtitle1: Text('In Progress')),
    StepItemModel(contents: Text('Final Step Content')),
  ],
  currentStep: 2,
  indicatorType: IndicatorType.onlyCurrent,
  lineType: LineType.dashed,
  indicatorColor: Colors.teal,
  backgroundColor: Colors.pink.shade100,
  borderColor: Colors.teal.shade200,
  selectedIndicator: Icon(Icons.check_circle, color: Colors.green),
  normalIndicator: Icon(Icons.circle_outlined, color: Colors.grey),
)

Parameters

StepIndicatorWidget

Parameter Type Description
steps List<StepItemModel> Defines the steps with optional title, subtitle, or custom content.
currentStep int The current step index.
indicatorType IndicatorType Specifies the indicator type: onlyCurrent will only highlight current step or previous which will highlight current and all previous steps.
stepItemHeight double? Custom height for each step item.
indicatorColor Color? The color for the step indicator.
borderColor Color? The border color for the step indicator.
backgroundColor Color? The background color for the step indicator.
lineType LineType? Specifies the line style: normal or dashed.
selectedIndicator Widget? Widget to override the current step indicator.
normalIndicator Widget? Widget to override the normal step indicator.

StepItemModel

Property Type Description
title Widget? Title widget for the step item.
subtitle1 Widget? First subtitle widget for the step item.
subtitle2 Widget? Second subtitle widget for the step item.
contents Widget? Custom content for the step item.

Note: Either title or contents must be provided; otherwise, an error will be thrown.

Enums

LineType

  • normal
  • dashed

IndicatorType

  • onlyCurrent
  • previous

Example App

Check out the example directory for a complete EXAMPLE app.

License

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

Libraries

vertical_steps_indicator