Stepper Widget In Flutter
By: Shaiq Khan
Tags: Stepper, Flutter, Mobile App Development, Dart, Flutter App Development

Stepper Widget:

A material stepper widget that showcases progress through a succession of steps. Steppers are especially valuable on account of forms where one step requires another or where various steps should be finished to present the complete form.

The widget is a flexible wrapper. A parent class should pass currentStep to this widget dependent on some rationale set off by the three callbacks that it gives.

Demo Module ::

This video shows how to create a stepper widget in a flutter and shows how the stepper widget will work in your flutter applications. They will change the type horizontal/vertical direction when you tap on the floating action button. They will be shown on your device.

Code Implement:

Create a new dart file called stepper_demo.dart inside the lib folder.

We’ll need to hook into onStepContinue , onStepCancel , onStepTapped and currenStep allow a user to cycle through it.

Now we will create an integer of currentStep. The index into steps of the current step whose content is displayed.

int _currentStep = 0;

Now, onStepTapped is the callback called when a step is tapped, with its index passed as an argument. We will create a tapped() widget and the code as shown below.

tapped(int step){

setState(() => _currentStep = step);

}

Now, onStepContinue is the callback called when the ‘continue’ button is tapped. If null, the ‘continue’ button will be disabled. We will create a continued() widget and the code, as shown below.

continued(){

_currentStep < 2 ?

setState(() => _currentStep += 1): null;

}

When we press the continue button then the step will forward to another step.

Now, onStepCancel is the callback called when the ‘cancel’ button is tapped. If null, the ‘cancel’ button will be disabled. We will create a cancel() widget and the code, as shown below.

cancel(){

_currentStep > 0 ?

setState(() => _currentStep -= 1) : null;

}

When we press the cancel button, then the step will backward to the previous step.

Now, we will define steps.

We will create a Stepper with three steps . We will deeply define all three steps below are:

Account Step

In a first step, we will be called an Account as the title. In this step, we will create two TextFormField called Email Address and Password.

Step(

title: new Text('Account'),

content: Column(

children: <Widget>[

TextFormField(

decoration: InputDecoration(labelText: 'Email Address'),

),

TextFormField(

decoration: InputDecoration(labelText: 'Password'),

),

],

),

isActive: _currentStep >= 0,

state: _currentStep >= 0 ?

StepState.complete : StepState.disabled,

),

When the user taps the continue button, the step will forward to the next step. The number was changed to an active tick icon. In this step, the cancel button will not work.

Address Step

In a second step, we will be called an Address as the title. In this step, we will create two TextFormField called Home Address and Postcode.

Step(

title: new Text('Address'),

content: Column(

children: <Widget>[

TextFormField(

decoration: InputDecoration(labelText: 'Home Address'),

),

TextFormField(

decoration: InputDecoration(labelText: 'Postcode'),

),

],

),

isActive: _currentStep >= 0,

state: _currentStep >= 1 ?

StepState.complete : StepState.disabled,

),

In this step, when the user will tap the continue button, the step will forward to the next step, and the number was changed to the active tick icon. When the user taps on the cancel button, the step will backward to the previous step, and the active tick icon was changed to a number again.

Mobile Number Step

In the last step, we will be called a Mobile Number as the title. In this step, we will create one TextFormField called Mobile Number.

Step(

title: new Text('Mobile Number'),

content: Column(

children: <Widget>[

TextFormField(

decoration: InputDecoration(labelText: 'Mobile Number'),

),

],

),

isActive:_currentStep >= 0,

state: _currentStep >= 2 ?

StepState.complete : StepState.disabled,

),

In this step, when the user will tap the continue button, the step will forward to the next step, and the number was changed to the active tick icon. When the user taps on the cancel button, the step will backward to the previous step, and the active tick icon was changed to a number again.

Horizontal Step

We will also change the type of direction in the stepper, so we make a floating action button, and on this button, we called an icon and switchStepsType() widget.

floatingActionButton: FloatingActionButton(

child: Icon(Icons.list),

onPressed: switchStepsType,

),

Now we can deep define switchStepsType() widget.

switchStepsType() {

setState(() => stepperType == StepperType.vertical

? stepperType = StepperType.horizontal

: stepperType = StepperType.vertical);

}

In this widget, we can define the default stepper type as vertical, and the user can tap the floating action button, then the stepper will changes vertical to horizontal. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Final Output

Code File:

Conclusion:

In the article, I have explained the basic structure of the Stepper Widget in a flutter; you can modify this code according to your choice. This was a small introduction to Stepper Widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying up Stepper Widget in your flutter projects. We will show you the stepper widget is?, show the stepper widget demo program, and how to change type direction horizontal/vertical when the user presses a floating action button in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤