Steppers and Form in Flutter

Journey of thousand miles begins with one step….

Website : http://flatteredwithflutter.com/2018/06/steppers-and-form-in-flutter/

Let’s Start….

Running short of ideas, so started exploring here and there about what can I program next…..Until I saw two three articles regarding the Forms in Flutter.

But, what would I do to stand-out….Hmmmm

I was always fascinated by the steppers functionality since Android itself, but never had a chance to program it. So, here I thought, why not integrate steppers with the form fields (e.g entering details of user)……

This post includes a form with fields such as ( Name, Phone, Email). All these fields are placed in a stepper widget.

Stepper

Every step has 2 buttons : Continue and Cancel.

Clicking continue, leads to next step while clicking cancel goes to previous step.

On every form field a validator is present

Stepper and form in flutter

There are 3 main functions in steppers :

  1. onStepContinue
  2. onStepCancel
  3. onStepTapped

If the validation is correct (checked on each and every step), then we go to next step….

Next Step in stepper…

Finally, if every validation is correct, then you see an alert dialog with the details entered as :

Details entered…

If something is found wrong on any step, a snackbar is shown…Else, formState.save() is called and as stated above alert dialog is shown.

FormState save…

Bonus, you might want to explore Validate package of flutter, which has in-built functionalities for validating various fields (e.g email, phone numbers)….

For complete source code, visit

https://github.com/AseemWangoo/flutter_programs/blob/master/StepperWithForm.dart

P.S………..


The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.