Flutter: Form and validator

Liem Vo
Liem Vo
Sep 4, 2018 · 3 min read

In my previous posts, I introduced the MVP architecture pattern and handling the key actions & next focus with the text Fields. Today, I will demonstrate how I use the form and validator in Flutter.

The demonstration will divide into three parts:

Build the basic form

Validate fields

Get datas


Build the basic form

The form has three TextFormFields and RaisedButton so the widget trees as below:

BMI Widget tree

The definition of each widget, you can refer at the Flutter Widgets.

There is the purpose of each widget in BMI form.


BMI input form

How does the validator work?

After studying from Flutter IO form validation guideline, there are three steps to handle the validations:

After building the UI and handling the form validation, I need to get data for the submit form.

Get data and submit

Each text form field has an action onSave that is triggered by calling onSave from _keyform.

_formKey.currentState.save();

In each onSave action, I store the values and use in the submission action.


Try to calculate without data so I got the error listing as the below image.

Finally, the form has been handling the validation before processing the data.

Inspired by Building a form with validation

Check the source code at BMI calculator


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.

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Liem Vo

Written by

Liem Vo

Senior mobile Developer (https://github.com/liemvo)

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade