Description:

simple horizontal stepper

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
copied to clipboard


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,
),
];
copied to clipboard

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,
),
),
],
),
);
copied to clipboard

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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter