cool_stepper_reloaded 3.1.0
cool_stepper_reloaded: ^3.1.0 copied to clipboard

CoolStepper Reloaded is a new widget based on CoolStepper, that displays a step by step sequence of operations. it could be helpful for a form wizard or onboarding.

Cool Stepper Reloaded #

Pub Version

Cool Stepper Reloaded is a widget that displays a step by step sequence of operations. it could be helpful for a form wizard or onboarding.

This project was forked from Cool Stepper, since I needed a null-safety package and keep an active development for this great widget. Thanks to emrade and all developers that helped to build such a amazing widget.

Screenshots #

Example #

CoolStepper(
   onCompleted: () => { // submit information to server },
   steps: List<CoolStep>[
       CoolStep(
        title: "Basic Information",
        subtitle: "Please fill some of the basic information to get started",
        content:  // Add the widget to get basic info here
       ),
       CoolStep(
        title: "Add Your address",
        subtitle: "Please fill your Address",
        content: // Add the widget to get address info here
       ),
       CoolStep(
        title: "Add a profile picture",
        subtitle: "Please add a profile picture if you want",
        content: // Add the widget to get profile pic here
       ),
   ],
);

This is a example of validation. The validation expects a function to validate the whole form. It will return a error String or null if everything is right.

validation: () {
 if (!_formKey.currentState!.validate()) {
   return 'Fill form correctly';   // Error message to be shown
 }
 return null;
},

CoolStepper Class #

AttributeData typeDescriptionDefault Value
onCompletedVoid Function()@required - A function that is triggers when all steps have been completedNull
stepsList@requiredNull
configCoolStepperConfigHelps to customize your stepperCoolStepperConfig(backText: "BACK", nextText: "NEXT", stepText: "STEP", ofText: "OF")
alignmentAlignmentThis will change content aligment, between header (if enabled) and buttonAlignment.topCenter
isHeaderEnabledboolBuild a header for each step, the default value is truetrue
showErrorSnackbarboolShow snackbar with error, if validation fails. Error comes from return from validation functionfalse

CoolStepperConfig Properties #

AttributeData typeDescriptionDefault Value
backTextStringThe text that should be displayed for the back buttonBACK
nextTextStringThe text that should be displayed for the next buttonNEXT
finalTextStringThe text that should be displayed for the next button on the final stepFINISH
stepTextStringThe text that describes the progressSTEP
ofTextStringThe text that describes the progressOF
headerColorColorThis is the background color of the headerTheme.of(context).primaryColor.withOpacity(0.1)
(DEPRECATED) iconColor - Use icon instead.ColorThis is the color of the icon. Warning: This will be removed soon, use icon insteadColor.black38
iconIconThis icon replaces the default iconIcon(Icons.help_outline,size: 18,Colors.black38)
titleTextStyleTextStyleThis is the textStyle for the title textTextStyle(fontSize: 16.0,fontWeight: FontWeight.bold,color: Colors.black38)
subtitleTextStyleTextStyleThis is the textStyle for the subtitle textTextStyle(fontSize: 14.0,fontWeight: FontWeight.w600,color: Colors.black)
backTextListListA List of string that when supplied will override 'backText'. Must be one less than the number of steps since for the first step, the backText won't be visiblenull
nextTextListListA List of string that when supplied will override 'nextText'Must be one less than the number of steps since the 'finalText' attribute is able to set the value for the final step's next buttonnull

ToDo #

  • [x] Added TextStyle parameter to customize to Next Button(2.2.0)
  • [x] Added TextStyle parameter to customize to Back Button (2.2.0)
  • [ ] Added TextStyle parameter to customize to Steps x of N
  • [ ] Added Option to change button background color for Next Button
  • [ ] Added Option to change button background color for Next Button

Please open an issue if something doesn't work or is not clear enough.

License #

See LICENSE.md

1
likes
130
pub points
49%
popularity

CoolStepper Reloaded is a new widget based on CoolStepper, that displays a step by step sequence of operations. it could be helpful for a form wizard or onboarding.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

lcs.vcn@gmail.com

License

MIT (LICENSE)

Dependencies

another_flushbar, flutter

More

Packages that depend on cool_stepper_reloaded