Flutter 101 for React Developers, Mostly… Part IV

A love story from scratch

So now that we have our minimum application working with a pretty nice idea of how to start adding contents, let talk about forms.

Forms are half the web. Everything has a form inside. And creating forms and handling field validation is not trivial most of the time. There are libraries focused on this matter, and web frameworks like Angular implemented their own form creation and validation tools.

It’s not so easy to create a form that shows the user what to do in the right moment without making him or her feeling uncomfortable with too many or too misinformed error messages and showing enough information to avoid making the process frustrating. How many times have you been in front of a password field trying to guess what the heck had the developer in mind to set an only error message with “password format incorrect” in it!?

The simplest form ever: the Login form.

So let see what we have in Flutter. And to do so, we are going to build a simple form for the login view. First of all, let see the shape of the view, and then get focus on the Form.

OK, don’t panic! Let us go line by line trying to understand all this mess.

First of all, if you want to use this view in the basic example app from Flutter, you just need to replace the home page like this.

And now that the view is working, let see why.

First of all, let see what is a form and how to access it.

A form in Flutter is a widget that contains form fields and other elements like text or buttons. And to identify and access the form, we use a reference, as we do in React to refer to a component inside our other component:

In this case, our form reference is a global key. This global key has a current state property that grants us access to the form methods that we will use to validate and save the form.

Validating the Form

When we call the form’s validate method, we are calling all the functions inside our form elements, attached to the property validator.

As you can see, a validator is a function that returns a string with an error message, or a null if it is valid. In this simple case, we are just checking that the field is not empty. If we enter no content, the error message is returned, and we will see the error in the screen, under the text input.

The form is valid when all the fields inside the form that can be validated are valid.

So after validating the form, we need to capture the valid values inside the fields.

Recovering the fields values.

To recover the values, we need to write them in our view properties “_email” and “_password”. So we call the “save” method in our form. This method launch every “onSaved” method in every field inside the form that has the method.

As you can see, the method is as simple as a method that receives a value and writes it inside the proper property.

Form action.

All these actions are launched using a button inside the form that validates and saves the values to use them.

As you can see, the first thing we do is validate the form. And if all the fields are valid, then we save the values in our local properties, and then we print them in the console.

But imagine the possibilities. Instead of just printing them, we could pass them to a login function to validate the credentials against a server, and if the server answer OK!, navigate to the main page in our application. Pretty cool, eh!

And this is the most basic information about forms I can show you. Out there is a wide world full of tutorials with more in deep information about the matter. So have fun expanding your knowledge. The limit is your imagination, and your free time after work!

References:

I’m learning, so I will publish more articles about Flutter’s basics and other tools from the Flutter ecosystem like Firebase, as soon as I learn them. I will try to show you the process and the problems I am finding in it. I will try to explain everything from my noob point of view. So, be patient my friends, and of course, all corrections and extra information will be very much welcome.

Flutter 101 for React Developers, Mostly… Part I
Flutter 101 for React Developers, Mostly… Part II
Flutter 101 for React Developers, Mostly… Part III

Hi! I’m a front developer in love with JavaScript. I have been coding for 16 years now, last six of them as Web developer. Now I am a React guy with Flutter.