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).
