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_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

const darkBlueColor = Color(0xff486579);
​
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Contact App',
      theme: ThemeData(
        primaryColor: darkBlueColor,
      ),
      home: MyHomePage(title: 'Contact List'),
    );
  }
}

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

class Contact {

  Contact({this.id,this.name,this.mobile});

  int id;
  String name;
  String mobile;
}

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 _MyHomePageStateclass with following.

import 'package:ref_sqlite_crud/models/contact.dart';
​
class _MyHomePageState extends State<MyHomePage> {
  Contact _contact= Contact();
  List<Contact> _contacts = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Center(
          child: Text(
            widget.title,
            style: TextStyle(color: darkBlueColor),
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[_form(), _list()],
        ),
      ),
    );
  }

  _form() => Text('form goes here');

  _list() => Text('list of contacts goes here');

}

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 #flutter article