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.
flutter create App_Name cd App_Name code .
App_Name with 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 press F5 . 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
MyApp widget as follows.
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.
Contact model class we’ve three properties with unique id along 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.
In this widget we’ve two state properties –
_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 –
_list() for showing form and a list of inserted contacts respectively. Now the app should look like this.
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.
First of all you could see the
_formKey property 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
TextFormField widgets for full name and mobile input controls. Finally we’ve a
RaisedButton widget to submit the form. So far our form looks like this.
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.
For both full name and mobile, we have defined the validation with
validator property 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
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
false is returned, corresponding text-fields will be highlighted with respective error message.
form.save() function is called, form text-fields
onSave event will triggered and its field value will be saved into respective
_contact properties. The same
_contact object is added to the list
_contacts . To reset the form, we’ve called
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
With ListView –
itemBuilder() function, we shows
_contact properties in
ListTile widget by iterating through
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).