easy_stepper 0.4.0 | Flutter package

About #

GitHub code size in bytes

A fully customizable, beautiful and easy to use stepper widgets with different variations.

Description #

The stepper widgets help you to show or collect information from users using organized steps.

Install #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  easy_stepper: <latest_version>

In your library add the following import:

import 'package:easy_stepper/easy_stepper.dart';

Getting started #

Simply import package:easy_stepper/easy_stepper.dart.
Important: The direction argument controls whether the stepper is displayed horizontally or vertically. A horizontal Stepper can be wrapped within a Column with no issues. However, if wrapped within a row, it must also be wrapped within the built-in Expanded widget. The same applies to the vertical Stepper.
Validation: To enable validation before the next step is reached, set the steppingEnabled property to an appropriate value in a StatefulWidget.
Controlling Steppers: All steppers are controlled using the activeStep property. You can control a stepper by tapping individual steps.
- See examples here.
To customize the color, border, etc., wrap a stepper widget inside a Container and specify it's decoration argument.

Example:

     EasyStepper(
       activeStep: activeStep,
       lineLength: 70,
       stepShape: StepShape.rRectangle,
       stepBorderRadius: 15,
       borderThickness: 2,
       padding: 20,
       stepRadius: 28,
       finishedStepBorderColor: Colors.deepOrange,
       finishedStepTextColor: Colors.deepOrange,
       finishedStepBackgroundColor: Colors.deepOrange,
       activeStepIconColor: Colors.deepOrange,
       loadingAnimation: 'assets/loading_circle.json', 
       steps: const [
         EasyStep(
           icon: Icon(Icons.add_task_rounded),
           title: 'Order Placed',
         ),
         EasyStep(
           icon: Icon(Icons.category_rounded),
           title: 'Preparing',
         ),
         EasyStep(
           icon: Icon(Icons.local_shipping_rounded),
           title: 'Shipping',
         ),
         EasyStep(
           icon: Icon(Icons.door_back_door_outlined),
           title: 'On The Way',
         ),
         EasyStep(
           icon: Icon(Icons.check_circle_outline_outlined),
           title: 'Delivered',
         ),
         EasyStep(
           icon: Icon(Icons.reviews_outlined),
           activeIcon: Icon(Icons.reviews_rounded),
           title: 'Add Review',
         ),
       ],
       onStepReached: (index) => setState(() => activeStep = index),
     ),

Features #

Simple to use icon stepper widget, wherein each icon defines a step. Hence, the total number of icons represents the total number of available steps. See Example.

Custom-Stepper #

With Image:

dash-Stepper

Example:

 EasyStepper(
                  activeStep: activeStep,
                  lineLength: 50,
                  stepShape: StepShape.rRectangle,
                  stepBorderRadius: 15,
                  borderThickness: 2,
                  padding: 20,
                  stepRadius: 28,
                  finishedStepBorderColor: Colors.deepOrange,
                  finishedStepTextColor: Colors.deepOrange,
                  finishedStepBackgroundColor: Colors.deepOrange,
                  activeStepIconColor: Colors.deepOrange,
                  showLoadingAnimation: false,
                  steps: [
                    EasyStep(
                      customStep: ClipRRect(
                        borderRadius: BorderRadius.circular(15),
                        child: Opacity(
                          opacity: activeStep >= 0 ? 1 : 0.3,
                          child: Image.asset('assets/1.png'),
                        ),
                      ),
                      customTitle: const Text(
                        'Dash 1',
                        textAlign: TextAlign.center,
                      ),
                    ),
                    EasyStep(
                      customStep: ClipRRect(
                        borderRadius: BorderRadius.circular(15),
                        child: Opacity(
                          opacity: activeStep >= 1 ? 1 : 0.3,
                          child: Image.asset('assets/2.png'),
                        ),
                      ),
                      customTitle: const Text(
                        'Dash 2',
                        textAlign: TextAlign.center,
                      ),
                    ),
                    EasyStep(
                      customStep: ClipRRect(
                        borderRadius: BorderRadius.circular(15),
                        child: Opacity(
                          opacity: activeStep >= 2 ? 1 : 0.3,
                          child: Image.asset('assets/3.png'),
                        ),
                      ),
                      customTitle: const Text(
                        'Dash 3',
                        textAlign: TextAlign.center,
                      ),
                    ),
                    EasyStep(
                      customStep: ClipRRect(
                        borderRadius: BorderRadius.circular(15),
                        child: Opacity(
                          opacity: activeStep >= 3 ? 1 : 0.3,
                          child: Image.asset('assets/4.png'),
                        ),
                      ),
                      customTitle: const Text(
                        'Dash 4',
                        textAlign: TextAlign.center,
                      ),
                    ),
                    EasyStep(
                      customStep: ClipRRect(
                        borderRadius: BorderRadius.circular(15),
                        child: Opacity(
                          opacity: activeStep >= 4 ? 1 : 0.3,
                          child: Image.asset('assets/5.png'),
                        ),
                      ),
                      customTitle: const Text(
                        'Dash 5',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                  onStepReached: (index) => setState(() => activeStep = index),
                ),

Horizontal-Stepper #

With Title:

Horizontal-Stepper

horizontal_dotted

Without Title:

Horizontal-Stepper-2

With Line Text:

horizontal_with_text

Horizontal-Stepper-4

Round Rectangle Border:

RRect_Horizontal_Stepper

Vertical-Stepper #

Vertical-Stepper Vertical-Stepper-3 Vertical-Stepper-2 Vertical-Stepper-4

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.