Introduction
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 .
Replace 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.
lib/models/contact.dart
In this 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
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.
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 onPressed
event.
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 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 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.
With ListView – itemBuilder()
function, we shows _contact
properties in ListTile
widget by iterating through _contacts
list.
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).