Stepper Widget In Flutter

Flutter is Google’s UI toolkit for making lovely, natively compiled iOS and Android applications from a single code base. To build any application, we start with widgets—the structure block of flutter applications. Widgets depict what their view ought to resemble, given their present configuration and state. It incorporates a text widget, row widget, column widget, container widget, and some more.

Every component on a screen of the Flutter application is a widget. The screen’s perspective entirely relies on the choice and grouping of the widgets used to build the application. Also, the structure of the code of an application is a tree of widgets.

In this article, we explore the Stepper Widget In Flutter. We will implement a stepper widget demo program and how to use it in your flutter applications.

Table Of Contents::

Stepper Widget

Code Implement

Code File

Conclusion

---

---

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 currenStepallow 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:

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.

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.

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.

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.

Code File:

https://gist.github.com/ShaiqAhmedkhan/b4c41a30004d6275b97fc0a4c70106ac#file-stepper_demo-dart

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 ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter Stepper Widget Demo:

flutter-devs/flutter-stepper-widget-demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---