Flutter StepperA

Key Features

Stepper A can easily build Stepper facility of you any flutter app.

  • Form Validation with FormKey GlobalKey<FormState>()
  • Support Horizontal and Vertical Stepper
  • Customized Stepper step Shape Rectangle, Circle,Diamond,Triangle
  • Customized Stepper step border Dash, Straight
  • Customized Stepper line Dash, Straight
  • Smooth sliding with Animation
  • Number step text style provision added.
  • Stepper page swipe
  • Easily Customize Step Image, IconData
  • Forward and previous button custom style .

package.yaml

stepper_a: <latest version>

Import

import 'package:stepper_a/stepper_a.dart';

Simple Example

 StepperA(
        stepperSize: const Size(300, 90),
        borderShape: BorderShape.rRect,
        borderType: BorderType.straight,
        stepperAxis: Axis.horizontal,
        lineType: LineType.dotted,
        stepperBackgroundColor: Colors.transparent,
        stepperAController: controller,
        stepHeight: 40,
        stepWidth: 40,
        stepBorder: true,
        pageSwipe: false,
        formValidation: true,
        previousButton: (int index) => StepperAButton(
            width: 90,
            height: 40,
            onTap: (int currentIndex){
            
            },
            buttonWidget: const Icon(
            Icons.arrow_back,
            color: Colors.white,
           ),
        ),
        forwardButton: (index) => StepperAButton(
            width: index == 0 ? 200 : 90,
            height: 40,
            onTap: (int currentIndex){
            
            },
            onComplete: (){
              debugPrint("Forward Button click complete step call back!");
            },
            buttonWidget: index == 3
            ? const Text('Complete', style: TextStyle(fontSize: 14, color: Colors.white))
                : const Text('Next', style: TextStyle(fontSize: 14, color: Colors.white)),
        ),
        customSteps: [
            const CustomSteps(stepsIcon: Icons.login, title: "LogIn"),
            const CustomSteps(stepsIcon: Icons.home, title: "Home"),
            const CustomSteps(stepsIcon: Icons.account_circle, title: "Account"),
            CustomSteps(image: Image.asset("assets/pic/pay.png",color: Colors.white,), title: "Payment"),
        ],
        step: const StepA(
            currentStepColor: Colors.green,
            completeStepColor: Colors.indigo,
            inactiveStepColor: Colors.black45,
            // loadingWidget: CircularProgressIndicator(color: Colors.green,),
            margin: EdgeInsets.all(5)
      ),
      stepperBodyWidget: [
            StepOne(controller: controller),
            StepTwo(controller: controller),
            StepThree(controller: controller),
            StepFour(controller: controller),
      ]
)

ScreenShot

FormKey validation

Horizontal rectangle

Screenshot_20230602_233154

Custom Steps

vertical circle

Others

vertical circle

Horizontal circle

Horizontal rectangle

Support

If this package was useful to you, helped you to easily deliver your app, saved you a lot of time, or you just want to support the project, I would be grateful if you give us a rating.

Libraries

stepper_a