emrade/flutter-cool-stepper

cool_stepper

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

Usage

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

import 'package:cool_stepper/cool_stepper.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

Attribute	Data type	Description	Default Value
onCompleted	Void Function()	@required - A function that is triggers when all steps have been completed	Null
steps	List	@required	Null
config	CoolStepperConfig	Helps to customize your stepper	CoolStepperConfig(backText: "BACK", nextText: "NEXT", stepText: "STEP", ofText: "OF")
showErrorSnackbar	boolean	Shows a snakbar at the bottom of the page when a step validation fails if set to true	false

CoolStepperConfig Properties

Attribute	Data type	Description	Default Value
backText	String	The text that should be displayed for the back button	BACK
nextText	String	The text that should be displayed for the next button	NEXT
finalText	String	The text that should be displayed for the next button on the final step	FINISH
stepText	String	The text that describes the progress	STEP
ofText	String	The text that describes the progress	OF
headerColor	Color	This is the background color of the header	Theme.of(context).primaryColor.withOpacity(0.1)
iconColor	Color	This is the color of the icon	Color.black38
icon	Icon	This icon replaces the default icon	Icon(Icons.help_outline,size: 18,Colors.black38)
titleTextStyle	TextStyle	This is the textStyle for the title text	TextStyle(fontSize: 16.0,fontWeight: FontWeight.bold,color: Colors.black38)
subtitleTextStyle	TextStyle	This is the textStyle for the subtitle text	TextStyle(fontSize: 14.0,fontWeight: FontWeight.w600,color: Colors.black)
backTextList	List	A 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 visible	null
nextTextList	List	A 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 button	null

flutter-cool-stepper's Issues

A comparison expression can't be an operand of another comparison expression.

Hello,

Is this only me? I was testing out things.
It might be something wrong with my Android Studio (v 4.1)

9:27: Error: A comparison expression can't be an operand of another comparison expression.
Try putting parentheses around one of the comparisons.
      steps: List<CoolStep>[

Try correcting the operator to an existing operator, or defining a '<' operator.
      steps: List<CoolStep>[

Update: Removing The Type and Generic solves the issue.

Create conditional steps

The Error i get when i try to add a conditional Stepper is: The element type 'CoolStep?' can't be assigned to the list type 'CoolStep'

I do this in the steps property like so:
... steps: [ CoolStep(...), CoolStep(...), isNew ? CoolStep(...) : null ]

Can you please take a look at an implementation like what I have above?

Final field 'contentPadding' is not initialized.

I am getting this error, 'contentPadding' is not initialized.
Try to initialize the field in the declaration or in every constructor.
final EdgeInsetsGeometry contentPadding;

on setState inside any step it goes back to first step

setState is basically refreshing the whole widget which is the behaviour, but there should be a way to stop going to step1 and maintain that state of step in which you currently are. what to do when you have a text that shows some calculated value base on date selection or drop down and it's value depend on another drop down?

How to handle the icon?

Can you please help me how I can hide the help icon or add a action to it?? Thanks.

Call validation from text editor's "Go" option

I can't find a way of when the user hits the go button on the keyboard for the Step's validation to be triggered to go to the next page. Is there a way to do this?

expose labels

Would be good have exposed the labels "BACK" "NEXT" and "STEP OF" to be easily changed to support any languaje or different texts people would like to have.

Why must progLabels have the same number as there are steps?

The progLabels must be declared with the same number of elements as there are steps, which is kinda... odd, because the last one would always uses the 'finalText'. For example, if there are 3 steps, I would declare the progLabels such that:

  config: CoolStepperConfig(
    backText: "PREV",
    finalText: "Complete!",
    progLabels: [ "Test1", "Test2", "Test3" ]
  ),

The first step would use the "Test2", so why do I need to declare "Test1"?

Handle Custom Click Functionality for next button

Is it possible to give our own functionality when the next button is clicked.

Custom colors for getPrevLabel() and getPrevLabel().

The ability to change color for the header text values are present, but the "PREV" and "NEXT"/"FINISH" do not have change color ability.

Custom Back and Next Widget

Is there any option to customize the back and next button, and have a "Go To Step" option, so that we can use our own Prev and Next Button.

Using CoolStepper as a multi form wizard and the 'PREV' button does not reinitialize the fields

I am using CoolStepper for a multi page input form, where each CoolStep has its 'Form', but where all forms share the same 'FormModel'.

I've noticed that when I step through the wizard, if I press on the 'PREV' button the data fields in the newly displayed step are not showing the form model values.

For example:

1. A screen has a two step input form
2. Cool step 1 has two input controls: a text input control and two radio buttons
3. When I click on the 'NEXT' button the display changes to show step 2
4. If I click on the 'PREV' button the screen display is changed back to show step 1, but the input controls are not set to the values that were present when I first left step 1

Any suggestions?

I would like to change the "PREV" and "NEXT" text to a button with arrow, how can I do that?

finalText is not working

[1.1.1] - 16/09/2020 #
Added 'progLabels' and 'finalText' property to CoolStepperConfig

It still showing "NEXT" for the next button when it reached the last stepper. Any idea?

Validation issues with Null Safety

Based on dart's null-safety feature, we can not return null for the validation method. So this is breaking in new version of dart beta.

Add Controller or Swipe

Could you add a controller? Or make it swipeable?
so it would be easy to user
Thankyou!

Validation is not working?

Hi,

I'm building a form using DropdownButton widget and TextFormField without using Form() widget and its built-in validation because I assume I can code validation function inside your CoolStepper widget. I know your validation property will return String, so I've made this code:

CoolStep(
title: 'Informasi Kendaraan',
subtitle: 'Silahkan isi dengan informasi umum kendaraan anda',
validation: () {
  if (brand == null) {
    return 'Pilih merk kendaraan anda';
  } else {
    return null;
  }
},
content: Column(
  children: [
    Container(
      margin: const EdgeInsets.symmetric(horizontal: 5.0),
      child: DropdownButton<String>(
        autofocus: true,
        items: brands.map((String brand) {
          return new DropdownMenuItem(
            value: brand,
            child: Text(brand, style: TextStyle(fontSize: 14),),
          );
        }).toList(),
        onChanged: _onBrandChanged,
        value: brand,
        hint: Text('Pilih merk', style: TextStyle(fontSize: 14),),
        isExpanded: true,
      ),
    ),
. . .

when I ran the code and didn't select any of the brand value, nothing happened. I thought the return String will show somewhere inside my applications. So what's the right way to do validation inside your CoolStep widget?

How to enter textfield value by default

Hello
I want to add value for textboxes? How can i do that?

Validation method in CoolStep can be used for prevent the user come back in the steps?

The validation method in the CoolStep are used by the verification if the condition for the actual step are satisfated, if if not, the user not can be going to the next step.

In my case, i need to prevent to the user come back in the steps, by pressing the "Back" button. Is there some way to do that?

Thank you for anyone how want to help me with this issue.

How can I hide the top title and description bar, so I can customize the header as per my design

How do I change the icon on every step?

Currently it is set once in the config, is there anyway I can choose which icon shows for which step

When click on next step there should be a function like `onNext` to handle custom user requests if any