Steppers and Form in Flutter

Steppers and Form in Flutter

aseemwangoo No Comment
Flutter

Journey of thousand miles begins with one step….

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

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

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…

Next Step in stepper…

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

Details entered…

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…

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)….

Video demonstration :

For complete source code, visit

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

P.S……………….

Leave a Reply