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.
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
There are 3 main functions in steppers :
- onStepContinue
- onStepCancel
- onStepTapped
If the validation is correct (checked on each and every step), then we go to next step….
Finally, if every validation is correct, then you see an alert dialog with the details entered as :
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.
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……………….
Would this work for iOS too?
Should be…
I wanted to ask if we place a reset button in the sliver bar , the form does not performs the function . What could be the problem
I would say, (in my experience), if you want a custom behavior(like a reset in your case), maybe create a custom widget 🙂