In this flutter tutorial, we’ll build a flutter app to design a form and a list of records inserted from the form. So the data inside app will be stored in widget state object. In upcoming articles we will include back-end API/ Database connected to this Flutter App.

Hope you already have a Flutter development set up. As prerequisite for this tutorial, you should know the basics of Flutter app development, for that you could check out the previous tutorial here.

I’ve created this app from Windows OS with VS Code.

Let’s get started

We’ll start by creating new flutter app, so execute following commands from project folder.

Copy to Clipboard

Replace App_Namewith a meaningful name. After executing above 3 lines one by one, brand new flutter app will be created and opened in VS Code. Now open your emulator. To run your flutter app pressF5. The default application is a counter app with a floating button at the bottom.

Let’s start customizing the app, As you know lib/main.dart file is the starting point. First of all let’s change primaryColor of Material theme and the title of the App. For that update MyAppwidget as follows.

Copy to Clipboard

we’ve defined the constant darkBlueColor with custom color and set the color to primaryColor property. By default it would be primarySwatch, But it does not allow a custom color.

In this application we are going deal with contact information of people containing information like full name and mobile number. so as a first step let’s create a model class.


Copy to Clipboard

In this Contact model class we’ve three properties with unique idalong with a named constructor.

Update Home Screen

Home screen of the app is designed with MyHomePage stateful widget. So let’s update _MyHomePageState class with following.

Copy to Clipboard

In this widget we’ve two state properties – _contact and _contacts. _contact is used for storing values of form fields and list of contacts will be saved in state property _contacts. More importantly we’ve two functions – _form() and _list() for showing form and a list of inserted contacts respectively. Now the app should look like this.

Flutter app which is about to show Form and a ListView Widgets

How to Design a Form in Flutter

Form is an important element in any application to accept user inputs in any application. Now to design a form let’s update the _form() as follows.

Copy to Clipboard

First of all you could see the _formKeyproperty along with other state properties, which is initialized by calling GlobalKey() function. Inside Form widget the _formKey is assigned to key property. In Flutter, basically a widget key allow us to identify a widget uniquely. You could see that later in this application.

Basically inside the form, we have two TextFormFieldwidgets for full name and mobile input controls. Finally we’ve a RaisedButtonwidget to submit the form. So far our form looks like this.

Flutter Form Design with TextField and Submit button

Form Validation and Submission

Before submitting the form,we’ve few rules for validation – both full-name and mobile text field must not be empty and there should at least 10 characters inside mobile input field. So let’s update the widgets for both form submission and validation.

Copy to Clipboard

For both full name and mobile, we have defined the validation with validatorproperty of the widget. call for validation will be done before form submission. Now along with these validator, you could see another function defined with onSaved property. it just save the text field value into the corresponding model state property _contact. Finally let’s defined the function _onSubmit(), which is already wired up to submit button onPressed event.

Copy to Clipboard

To get the form reference, we’ve stored _formKey.currentState property in form variable. To check whether form as whole is valid or not, we’ve called the function validat(). if validation successful, it returns true.otherwise false is returned, corresponding text-fields will be highlighted with respective error message.

when is called, form text-fields onSave event will triggered and its field value will be saved into respective _contact properties. The same _contactobject is added to the list _contacts. To reset the form, we’ve called reset() function.

Now if you are wondering, why don’t we directly add _contact object into _contacts list? If we do that, actually we’re adding reference of _contact object into the list. hence when change _contact object, the same change will be reflected in ListView widget. hence we’ve created a separate instance with the named constructor.

Show list of Records in ListView Widget

Now let’s update _list() function, so that we can iterate though _contacts list with the help of ListView widget.

Copy to Clipboard

With ListViewitemBuilder() function, we shows _contact properties in ListTile widget by iterating through _contacts list.

Showing Flutter ListView widget, populated with data

So that’s all about this tutorial. In upcoming tutorials, we’ll discuss various database/ back-end APIs connected to this flutter app, by implementing complete CRUD Operations(insert, update, delete and retrieve).