another_stepper 1.1.4 another_stepper: ^1.1.4 copied to clipboard
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,
)