Horizontal Stepper

A horizontal stepper is a horizontal layout of steps.

Maintainer : Tanmoy Karmakar

Specs

This library allows you to create a horizontal stepper with a set of steps. Each step can be a different component. The steps can be customized to have a different title, subtitle.

It has been written 100% in Dart. ❤️

Installing

Add the following to your pubspec.yaml file:

dependencies:
  simple_horizontal_stepper: ^0.0.1

Simple Usage

To integrate the horizontal stepper into your app, you need to import the import 'package:simple_horizontal_stepper/simple_horizontal_stepper.dart' which contains HorizontalStepper widget.

// This is the sample data for the horizontal stepper

List<StepperData> stepperData = [
      StepperData(
        title: "Stepper 1",
        subtitle: "Stepper 1 subtitle",
        onTapped: () {
          showCupertinoDialog("Stepper 1", "Stepper 1 subtitle", context);
        },
        isDone: true,
      ),
      StepperData(
        title: "Stepper 2",
        subtitle: "Stepper 2 subtitle",
        onTapped: () {
          showCupertinoDialog("Stepper 2", "Stepper 2 subtitle", context);
        },
        isDone: false,
      ),
    ];

Widget Implementation

To integrate the horizontal stepper into your app, you need to import the import 'package:simple_horizontal_stepper/simple_horizontal_stepper.dart' which contains HorizontalStepper widget.

// This is the sample data for the horizontal stepper

Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(24),
            child: HorizontalStepperWithCard(
              stepperDataList: stepperData,
              tickColor: Colors.blue,
              cardColor: Colors.grey[700],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(24),
            child: HorizontalStepper(
              stepperDataList: stepperData,
              tickColor: Colors.orange,
            ),
          ),
        ],
      ),
    );

Custom Usage

There are several options that allow for more control:

Properties	Description
stepperDataList	This is the data model that will be added to provide data to the widget
tickColor	This helps in customizing the checker circle color
cardColor	This helps in customizing the card color

StepperData Model

There are several options that you can explore:

Properties	Description
title	To add the title to the stepper
subtitle	To add the subtitle to the stepper
onTapped	This helps in customizing the on tap functionality of the stepper
isDone	This is used to toggle the ticker widget