Create a Simple Stepper with Flutter

Icons made by monkik, Pixelmeetup, and Freepik from www.flaticon.com

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the “Flutter: New Project” option:

2. As usual the "Counter App Example" will be created. In this occasion I will work here. Locate the body, and remove the content inside the Column's Children:

3. Let's start creating the Stepper by adding the Stepper class. Add the type and also the steps:

4. Pretty simple, am I right? If you try to run the app right now you will get an error, because our Stepper doesn't have steps:

5. Let's add our first step. Inside the steps: [] list, we will add a simple TextFormField, in which we will allow the user to add any text, set a step state, give it a title (required), and also allow the autocorrect feature:

6. You can run the app now. Go ahead, fire up the emulator and run without debugging:

7. Neat isn't it? However, the field is not explicit enough for the user. To solve that, let's add some input decoration, to show a placeholder, a field hint and also an icon to make it prettier:

Check out the complete step with decoration included:

8. Run the app to see the changes:

9. Let's create an Amount step, which will look exactly like the previous one, except for the title:

10. Now we have two steps but cannot move forward because that functionality has not been coded yet. First, declare a int variable called currStep:

11. Now, let's go back to the Stepper, and right below the Stepper Type, add the following code that will set the current step, and also change the step index so that you can move between steps:

12. Add functionality to the "Cancel" button, and also allow the user to show the step when it is tapped:

14. Finally, add a button that will send the form information to the server:

15. And that's it! You just created a Simple Stepper with Flutter:

16. As you noticed, this Stepper doesn't have any type of validation, and doesn't save the data entered. This is intentional since it would be hard just to cram everything up in one post, and instead I explained how to create one without any complicated functionality so that you can understand how to create a Stepper. Next article I will add validation, and how to send the information to the server.

 Get the code here: Simple Stepper with Flutter