another_stepper 1.1.5

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

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: "Order Placed",
      subtitle: "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: "Preparing",
      subtitle: "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: "On the way",
      subtitle: "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: "Delivered",
  ),
];

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