Let's talk about adding forms to your Flutter apps and how to validate them.

Let's build our tutorial boilerplate:

So you'll see an app bar and a FloatingActionButton which we will use to submit the form.

So we will go ahead and add our Form now. We will add the key variable at the top:

And then we will add a body and the form:

And then we will just print to the console when the button is pressed for now.

Press the save button and you should see this message in the console:

Let's start adding some form elements to the body now. We will start with a TextFormField for a users name:

Now we can add some validation to the text field like this:

This will return "Field is required." if the field doesn't have anything in it. If it does have something in it, it will return null.

Inside the floatingActionButton's onPressed we need to validate and save the form like this:

If you leave the field blank and hit the submit button, you'll see an error!

Validating an E-mail Address is very similar. First let's wrap a column around the name field:

And then we will add a TextformField for e-mail address:

And then we add the validator to this text field as well:

It first checks to make sure the field is populated, and then it checks to make sure the e-mail address is in the proper format.

And now let's add the password field:

And then the validation section:

It's not pretty but it'll do for this tutorial. Again we check to make sure it's not null/empty and then we check to make sure the password fits a standard password format. If everything passes we just return null.

We will now add a Drop Down, which is fairly similar to the TextFormField. Let's start by adding a variable at the top of FormAppState that will hold the drop down value:

And then we will add it in the body below the password like so:

And then we will add the validator below onChanged:

Checkboxes and Radio buttons is where it gets complicated, because these two widgets don't seem to support the validator in Flutter, at least based on my research. But there is a workaround for it using FormField. We will start with the Checkbox. let's create a folder called components, and a file called checkbox.dart:

Now inside checkbox.dart we import material and create a stateful widget:

At the top of _CheckboxFormFieldState let's add a checkbox variable:

And then we will add the FormField and Checkbox:

Now we have to plug it into main.dart. We will import it at the top:

And then we can call it right under the DropDownButtonFormField:

To get the checkbox validated now we have to do a few more things. First, we need to add a text area to display the error message when there is one. So let's first wrap the Checkbox with a column:

And then below the checkbox we will put a Text Widget to display the error. We'll go ahead and make it red also so it stands out:

Now we just need to add the validator:

And the check box should now error out when it is not checked.

And then we can do a radio button. Let's create another file in components called radio.dart:

So once again we import material and then add a stateful widget:

We will add a variable at the top of _RadioFormFieldState to store the selected radio button

Add our form field and our column:

Inside the column we will add two Radio widgets and a Text widget, we'll do the top Radio button first:

And then the bottom Radio widget:

And then the text widget that will show the error message:

import that at the top of main.dart:

And then add it to the body below the checkbox:

Now we just need to add validation to radio.dart below the FormField builder:

And finally we will print out all the results on a success so we can see that it's working correctly. We will start by creating an string Map called fieldValues at the top of _FormAppState:

We will add an onSaved to the Name TextFormField:

And to the E-mail TextFormField:

The Password TextFormField:

And the DropdownButtonFormField:

(You can also do "fieldValues['Drop Down'] = value.toString();", should still work)

And then in the onPressed for FloatingActionButton, we'll just iterate through the Map to show the results.

Pressing the floatingActionButton should now show these results:

The checkbox and radio button will be a little more complicated. We will create a callback function at the top that we will pass data to in order to set the fieldValues map for those two:

Then we will pass the call back down in the calls for those inside the Scaffold body:

You'll notice we removed the const from the CheckboxFormField call.

Switching over to checkbox.dart we will add a way to store setFieldValue so we can use it on save:

And then we just need to add the onSaved:

And then finally we do the same thing to the radio button, starting with the call in the scaffold body:

Set the callback at the top of RadioFormField

And then add the onSaved:

Source Files