cool_stepper_custom

CoolStepperCustom based on CoolStepper, a widget that displays a step by step sequence of operations that fixes some of the bugs and adds additional customization abilities.

Usage

To use this package, add cool_stepper_custom as a dependency in your pubspec.yaml file. And add this import to your file.

import 'package:cool_stepper/cool_stepper_custom.dart';

Screenshots

Example

CoolStepper(
   onCompleted: () {},
   steps: List<CoolStep>[
       CoolStep(
        title: "Basic Information",
        subtitle: "Please fill some of the basic information to get started",
        content: Container()
       ),
   ],
);

For each step, return a null, if you want the validation to pass or a String message which would be displayed if you set the showErrorSnackbar attribute to true.

validation: () {
          if (!_formKey.currentState!.validate()) {
            return 'Fill form correctly';
          }
          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")
showErrorSnackbarbooleanShows a snakbar at the bottom of the page when a step validation fails if set to truefalse

CoolStepperConfig Properties

AttributeData typeDescriptionDefault Value
backTextStringThe text that should be displayed for the back buttonBACK
backTextStyleTextStyleThe style for the back text
backButtonStyleButtonStyleThe style for the back button
backButtonPaddingEdgeInsetsGeometryThe padding for the back button
nextTextStringThe text that should be displayed for the next buttonNEXT
nextTextStyleTextStyleThe style for the next text
nextButtonStyleButtonStyleThe style for the next button
nextButtonPaddingEdgeInsetsGeometryThe padding for the next button
finalTextStringThe text that should be displayed for the next button on the final stepFINISH
finalTextStyleTextStyleThe style for the final text
finalButtonStyleButtonStyleThe style for the final button
finalButtonPaddingEdgeInsetsGeometryThe padding for the final button
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)
iconColorColorThis is the color of the iconColor.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

Libraries

cool_stepper