Flutter Tutorial - How To Use Stepper Widget | The Right Way [2021] Multi-Step Forms

how to build the stepper widget in flutter to build a multi-step form where the user can fill out the information step by step in a linear manner if you are new here subscribe to my channel and make sure to watch this video till the end let's start by creating a stepper widget and here inside we can then define some steps which we want to do inside of a new method and here inside we create then basically a list of different steps and with this we have here three steps in our ui which we have defined here every time over our title next we want to add here some interaction to our stepper simply go to your stepper widget and add the current step and also define it inside of your state and with this we define here always the current selected step let's also implement the continue and cancel button therefore you have here the property on step continue which is always called if you click on the continue button and in this case we simply want to go one step further to the next step here in our step list and secondly we also can implement our cancel button and if we click on this cancel button then we decrement here our current step and to test here everything out we also want to go to our steps and here you have every time the property if a step is active and here we basically check then if our current step is active and with this our active steps have here always this blue color and we can click here on continue to go to the next step and if i click again on continue then we go to the last step and you also can click here on the cancel button to go back to the previous step and lastly if we click on the continue button at the last step then we basically want to do something so here if we have the last step then we want to send for example some data to the server and therefore we also want to determine if we are currently inside of the last step within our stepper let's also try it out so we are here on the last step and i click on the continue button and then you see here in our console the text completed which we have printed if we are here in the last step and secondly we also want to make sure that we cannot click on the cancel button on the first step and therefore we basically check here if our current step is the first step then we want to return here null and with this our cancel button is here disabled and we cannot click here on cancel within the first step next we also want to create the content of each single step so we basically want to create here the widget that is here displayed between our stepper and our buttons therefore you have here this content property where you can basically set then any widget inside so in my case i put here some text fields inside for each of our steps and i also create then every time a text editing controller inside of our state and with this you have here a simple form where you can fill here in your data and then you can click on continue here you can also fill in the information and if you go then back by cancelling the information is here still inside and also if you click on continue you always see here all the information that the user has typed inside inside the steps you can also define then the state of each of your steps so you can define here a completed state or an index state and this is what i want to add here for the first two steps and every time if our state is completed then you see here this done icon and otherwise we have here this index icon which means that we display here number and now i can also go here through this list and you see initially we have only the numbers and if we have completed this one then it turns here to complete it and this looks pretty cool also you could click here on the steps itself to switch between the steps and therefore you have here inside of your stepper widget the property on step tapped where we get them every time the step on which we have clicked and we also want to save then this step inside of our state and with this you can also click here on the different steps to move between your steps you also can wrap around your stepper widget a seam widget and here you can then basically change also the color of your stepper so in this case i put the color to red and with this you see that our stepper has here now the red color instead inside next you can also customize here these buttons simply go to your stepper widget and here inside you have a property controls builder where you can create then your own buttons so in my case i create a next button and a back button and also make sure to put here then the callbacks on step continue and on step cancel inside of your buttons so if you click on the next button you call on step continue and if you click on the back button then you call this on step cancel and if you like you can also hide here the back button that is displayed on the right side for the first step so simply check here if we are on the first step then we only want to display here for example the next button and now we have here our custom buttons like you can see next and also back and in the last step you maybe want to customize here your next button and want to display a different text and therefore we basically display here the text confirm if it is the last step and therefore you also check here if we are in the last step of our stepper and with this we have here a confirm button for our last step and in the other steps we always have here this next button and lastly if we click on this confirm button then we want to send our data to the server and you simply go inside of this on step continue and here before we have already implemented this step so if it is the last step then we can send here our data to the server alternatively you also can set here then a flag is completed to true which you simply create inside of your state and which is by default false and now based on this flag you can also change here your ui so in case it is completed then you simply can display here other widgets and with this i can click on this confirm button and then we display here some other widgets because we are now inside of the is completed state and therefore we display here some other widgets that you see here on the right side and of course if you click here on this reset button then you can also reset here your form again therefore i have created here this reset button and if we click on it then we reset here our state again and i also have simply cleared here all the text fields that we have inside of our form in case you want to have a vertical stepper you can also uncomment here the stepper type horizontal and with this you have here this vertical stepper instead so you can step here then vertically through your stepper and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music] you

Channel: Johannes Milke

Views: 8,878

Keywords: android stepper, flutter, flutter form stepper, flutter multi step form, flutter stepper, flutter stepper example, flutter stepper form, flutter stepper horizontal, flutter stepper tutorial, flutter stepper widget, flutter tutorial, flutter widgets, how to use the stepper flutter, ios stepper, mobile, stepper, stepper color, steps

Id: MpQTNW5woVI

Length: 7min 34sec (454 seconds)

Published: Wed Sep 08 2021