A flutter package to create easily customizable Horizontal and Vertical stepper.

Getting started

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  another_stepper: <latest_version>

Import the following in your working dart file:

import 'package:another_stepper/another_stepper.dart';

Example AnotherStepper

Dummy StepperData

  List<StepperData> stepperData = [
  StepperData(
      title: StepperText(
        "Order Placed",
        textStyle: const TextStyle(
          color: Colors.grey,
        ),
      ),
      subtitle: StepperText("Your order has been placed"),
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_one, color: Colors.white),
      )),
  StepperData(
      title: StepperText("Preparing"),
      subtitle: StepperText("Your order is being prepared"),
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_two, color: Colors.white),
      )),
  StepperData(
      title: StepperText("On the way"),
      subtitle: StepperText(
          "Our delivery executive is on the way to deliver your item"),
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_3, color: Colors.white),
      )),
  StepperData(
    title: StepperText("Delivered",
        textStyle: const TextStyle(
          color: Colors.grey,
        )),
  ),
];

Dummy StepperText

StepperText("Delivered",
        textStyle: const TextStyle(
          color: Colors.grey)),

Horizontal(Default)

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  iconWidth: 40, // Height that will be applied to all the stepper icons
  iconHeight: 40, // Width that will be applied to all the stepper icons
)

Output Horizontal(Default)

Vertical(Default)

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  iconWidth: 40, // Height that will be applied to all the stepper icons
  iconHeight: 40, // Width that will be applied to all the stepper icons
)

Output Vertical(Default)

Horizontal Inverted

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  inverted: true,
)

Output Horizontal Inverted

Vertical Inverted

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  inverted: true,
)

Output Vertical Inverted

Active index

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  inverted: false,
  activeIndex: 2,
)

Output Active index

Vertical Gap

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  inverted: false,
  activeIndex: 2,
  gap: 60,
)

Output Vertical Gap

Horizontal Gap

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  inverted: false,
  activeIndex: 2,
  gap: 60,
)

Output Horizontal Gap

Bar Thickness

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  inverted: false,
  activeIndex: 2,
  barThickness: 8,
)

Output Bar Thickness

Custom Dot and Bar

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  dotWidget: Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
  color: Colors.red,
  borderRadius: BorderRadius.all(Radius.circular(30))
  ),
  child: Icon(Icons.navigate_next_sharp, color: Colors.white),
  ),
  activeBarColor: Colors.red,
  inActiveBarColor: Colors.grey,
  activeIndex: 1,
)

Output Custom Dot and Bar

Custom Dot, Bar, Dot thickness and long text

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  dotWidget: Container(
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
  color: Colors.red,
  borderRadius: BorderRadius.all(Radius.circular(30))
  ),
  child: Icon(Icons.fastfood, color: Colors.white),
  ),
  activeBarColor: Colors.red,
  inActiveBarColor: Colors.grey,
  activeIndex: 2,
  barThickness: 8,
)

Output Dot, Bar, Dot thickness and long text