stepper_a 1.3.0 stepper_a: ^1.3.0 copied to clipboard
StepperA is a simple and robust Flutter package which is making it possible to use FormKey validation and easy access your own button press control.
Flutter StepperA #
Key Features #
Stepper A can easily build Stepper facility of you any flutter app.
- Form Validation with FormKey [GlobalKey
- 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 #
Custom Steps #
Others #
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.