Form and GlobalKey

Let’s start coding a simple form, using a MaterialApp widget.

Forms are an essential feature for almost any mobile app. There are two major types of forms, one is for something like sign up or some onboarding flow and another is more of a utility, such as a settings or an update profile screen.

Our form will require some kind of state to be maintained, therefore, using a StatefulWidget. State in Flutter is nothing more than a bunch of variables that are owned and updated by a given widget. If you’re not familiar with StatefulWidgets, I recommend reading up on it before continuing.

Flutter offers a widget called “Form”, much like an HTML form. All this is is a container for a bunch of form widgets. The two major ways we use a form is to one, validate its form fields and two, save the form.

When we want to perform actions like this, say, when we click a “Save” button for example, we need to refer to our form using some unique identifier. This is much like an HTML, where a "div" can have an “id” attribute. All of this is done by using Flutter’s “GlobalKey” class. GlobalKey lets us generate a unique, app-wide ID that we can associate with our form.

Defining Our User Model

A simple model here defines a user profile that we'll update in our form. The benefit of this is it keeps our form simple, where it only needs to refer to a simple User instance. Later, we can easily convert this to JSON when we want to submit the form to a server (not covered in this tutorial).

Our Form Fields

The next concept is form fields. The main piece of documentation we’ll be referencing is called Flutter’s “Input Widgets”.

Flutter offers two general categories of form fields, one on the Material Design style and one in the Cupertino style. We’ll cover both in this tutorial but the Material Design form fields in more depth, since they are more customizable when developing custom UI.

Now, because the Material Design text field widget supports validation (note that some don't), we can implement a 'validator', which will be triggered when we validate our form (in a later step in this tutorial):

Switches and Checkboxes

Implementing a switch and checkbox is pretty straightforward. Note that on iOS, it's not typically the norm to use checkboxes, you only use switches.

In our first example, we do not only implement a Switch widget, we implment a SwitchListTile. What this does is give us a "list tile" that nicely supports a text label on the left and right aligns our switch to the right:

A Note About "Multi-Platform" Friendly UX

There's a glaring problem with this form example, it's not friendly to iOS users. If you’re serious about writing multi platform mobile apps, it’s important to understand what both Android and iOS users are used to. Now, we have an Apple style form in the source code posted, but unless we have strict requirements to show an Apple style form if the OS is iOS, we're going to want to render a form that's more OS neutral.

In order to show a nice looking form that's not overly Material Design like but also not overly Apple Flat Design (CocoaTouch) like, we're going to want to customize our Material Design based form.

Summary

Forms are a critical skill for any mobile developer. Learning how to present a form that's easy to use and familiar to any user, especially based on the OS they use, is a great skill to have. In the next part of this tutorial, we'll be customizing our form so that it looks much more "multi platform" friendly.