Author: saqibkhan

Flutter framework does a great job by providing an excellent framework to build mobile applications in a truly platform independent way. By providing simplicity in the development process, high performance in the resulting mobile application, rich and relevant user interface for both Android and iOS platform, Flutter framework will surely enable a lot of new developers to develop high performance and feature-full mobile application in the near future.

In this chapter, we are going to learn how to write a full fledged mobile application, expense_calculator. The purpose of the expense_calculator is to store our expense information. The complete feature of the application is as follows −

• Expense list.
• Form to enter new expenses.
• Option to edit / delete the existing expenses.
• Total expenses at any instance.

We are going to program the expense_calculator application using below mentioned advanced features of Flutter framework.

• Advanced use of ListView to show the expense list.
• Form programming.
• SQLite database programming to store our expenses.
• scoped_model state management to simplify our programming.

Let us start programming the expense_calculator application.

• Create a new Flutter application, expense_calculator in Android studio.
• Open pubspec.yaml and add package dependencies.

dependencies: 
   flutter: 
  sdk: flutter 
   sqflite: ^1.1.0 
   path_provider: ^0.5.0+1 
   scoped_model: ^1.0.1 
   intl: any

• Observe these points here −
  • sqflite is used for SQLite database programming.
  • path_provider is used to get system specific application path.
  • scoped_model is used for state management.
  • intl is used for date formatting.
• Android studio will display the following alert that the pubspec.yaml is updated.

• Click Get dependencies option. Android studio will get the package from Internet and properly configure it for the application.
• Remove the existing code in main.dart.
• Add new file, Expense.dart to create Expense class. Expense class will have the below properties and methods.
  • property: id − Unique id to represent an expense entry in SQLite database.
  • property: amount − Amount spent.
  • property: date − Date when the amount is spent.
  • property: category − Category represents the area in which the amount is spent. e.g Food, Travel, etc.,
  • formattedDate − Used to format the date property
  • fromMap − Used to map the field from database table to the property in the expense object and to create a new expense object.

factory Expense.fromMap(Map<String, dynamic> data) { 
   return Expense( 
  data&#91;'id'], 
  data&#91;'amount'], 
  DateTime.parse(data&#91;'date']),    
  data&#91;'category'] 
   ); 
}

• toMap − Used to convert the expense object to Dart Map, which can be further used in database programming

Map<String, dynamic> toMap() => { 
   "id" : id, 
   "amount" : amount, 
   "date" : date.toString(), 
   "category" : category, 
};

• columns − Static variable used to represent the database field.
• Enter and save the following code into the Expense.dart file.

import 'package:intl/intl.dart'; class Expense {
   final int id; 
   final double amount; 
   final DateTime date; 
   final String category; 
   String get formattedDate { 
  var formatter = new DateFormat('yyyy-MM-dd'); 
  return formatter.format(this.date); 
   } 
   static final columns = ['id', 'amount', 'date', 'category'];
   Expense(this.id, this.amount, this.date, this.category); 
   factory Expense.fromMap(Map<String, dynamic> data) { 
  return Expense( 
     data&#91;'id'], 
     data&#91;'amount'], 
     DateTime.parse(data&#91;'date']), data&#91;'category'] 
  ); 
   }
   Map<String, dynamic> toMap() => {
  "id" : id, 
  "amount" : amount, 
  "date" : date.toString(), 
  "category" : category, 
   }; 
}

• The above code is simple and self explanatory.
• Add new file, Database.dart to create SQLiteDbProvider class. The purpose of the SQLiteDbProvider class is as follows −
  • Get all expenses available in the database using getAllExpenses method. It will be used to list all the user’s expense information.

Future<List<Expense>> getAllExpenses() async { 
   final db = await database; 
   
   List<Map> results = await db.query(
  "Expense", columns: Expense.columns, orderBy: "date DESC"
   );
   List<Expense> expenses = new List(); 
   results.forEach((result) {
  Expense expense = Expense.fromMap(result); 
  expenses.add(expense); 
   }); 
   return expenses; 
}

• Get a specific expense information based on expense identity available in the database using getExpenseById method. It will be used to show the particular expense information to the user.

Future<Expense> getExpenseById(int id) async {
   final db = await database;
   var result = await db.query("Expense", where: "id = ", whereArgs: [id]);
   
   return result.isNotEmpty ? 
   Expense.fromMap(result.first) : Null; 
}

• Get the total expenses of the user using getTotalExpense method. It will be used to show the current total expense to the user.

Future<double> getTotalExpense() async {
   final db = await database; 
   List<Map> list = await db.rawQuery(
  "Select SUM(amount) as amount from expense"
   );
   return list.isNotEmpty ? list[0]["amount"] : Null; 
}

• Add new expense information into the database using insert method. It will be used to add new expense entry into the application by the user.

Future<Expense> insert(Expense expense) async { 
   final db = await database; 
   var maxIdResult = await db.rawQuery(
  "SELECT MAX(id)+1 as last_inserted_id FROM Expense"
   );
   var id = maxIdResult.first["last_inserted_id"]; 
   var result = await db.rawInsert(
  "INSERT Into Expense (id, amount, date, category)" 
  " VALUES (?, ?, ?, ?)", &#91;
     id, expense.amount, expense.date.toString(), expense.category
  ]
   ); 
   return Expense(id, expense.amount, expense.date, expense.category); 
}

• Update existing expense information using update method. It will be used to edit and update existing expense entry available in the system by the user.

update(Expense product) async {
   final db = await database; 
   
   var result = await db.update("Expense", product.toMap(), 
   where: "id = ?", whereArgs: [product.id]); 
   return result; 
}

• Delete existing expense information using delete method. It will be used remove the existing expense entry available in the system by the user.

delete(int id) async {
   final db = await database;
   db.delete("Expense", where: "id = ?", whereArgs: [id]); 
}

• The complete code of the SQLiteDbProvider class is as follows −

import 'dart:async'; 
import 'dart:io'; 
import 'package:path/path.dart'; 
import 'package:path_provider/path_provider.dart'; 
import 'package:sqflite/sqflite.dart'; 
import 'Expense.dart'; 

class SQLiteDbProvider {
   SQLiteDbProvider._(); 
   static final SQLiteDbProvider db = SQLiteDbProvider._(); 
   
   static Database _database; Future<Database> get database async { 
  if (_database != null) 
     return _database; 
  _database = await initDB(); 
  return _database; 
   } 
   initDB() async {
  Directory documentsDirectory = await getApplicationDocumentsDirectory(); 
  String path = join(documentsDirectory.path, "ExpenseDB2.db"); 
  return await openDatabase(
     path, version: 1, onOpen:(db){}, onCreate: (Database db, int version) async {
        await db.execute(
           "CREATE TABLE Expense (
              ""id INTEGER PRIMARY KEY," "amount REAL," "date TEXT," "category TEXT""
           )
        "); 
        await db.execute(
           "INSERT INTO Expense ('id', 'amount', 'date', 'category') 
           values (?, ?, ?, ?)",&#91;1, 1000, '2019-04-01 10:00:00', "Food"]
        );
        /*await db.execute(
           "INSERT INTO Product ('id', 'name', 'description', 'price', 'image') 
           values (?, ?, ?, ?, ?)", &#91;
              2, "Pixel", "Pixel is the most feature phone ever", 800, "pixel.png"
           ]
        ); 
        await db.execute(
           "INSERT INTO Product ('id', 'name', 'description', 'price', 'image') 
           values (?, ?, ?, ?, ?)", &#91;
              3, "Laptop", "Laptop is most productive development tool", 2000, "laptop.png"
           ]
        );
        await db.execute(
           "INSERT INTO Product ('id', 'name', 'description', 'price', 'image') 
           values (?, ?, ?, ?, ?)", &#91;
              4, "Tablet", "Laptop is most productive development tool", 1500, "tablet.png"
           ]
        );
        await db.execute(
           "INSERT INTO Product ('id', 'name', 'description', 'price', 'image') 
           values (?, ?, ?, ?, ?)", &#91;
              5, "Pendrive", "iPhone is the stylist phone ever", 100, "pendrive.png"
           ]
        ); 
        await db.execute(
           "INSERT INTO Product ('id', 'name', 'description', 'price', 'image') 
           values (?, ?, ?, ?, ?)", &#91;
              6, "Floppy Drive", "iPhone is the stylist phone ever", 20, "floppy.png"
           ]
        ); */ 
     }
  );
   }
   Future<List<Expense>> getAllExpenses() async {
  final db = await database; 
  List&lt;Map&gt; 
  results = await db.query(
     "Expense", columns: Expense.columns, orderBy: "date DESC"
  );
  List&lt;Expense&gt; expenses = new List(); 
  results.forEach((result) {
     Expense expense = Expense.fromMap(result);
     expenses.add(expense);
  }); 
  return expenses; 
   } 
   Future<Expense> getExpenseById(int id) async {
  final db = await database;
  var result = await db.query("Expense", where: "id = ", whereArgs: &#91;id]); 
  return result.isNotEmpty ? Expense.fromMap(result.first) : Null; 
   }
   Future<double> getTotalExpense() async {
  final db = await database;
  List&lt;Map&gt; list = await db.rawQuery(
     "Select SUM(amount) as amount from expense"
  );
  return list.isNotEmpty ? list&#91;0]&#91;"amount"] : Null; 
   }
   Future<Expense> insert(Expense expense) async {
  final db = await database; 
  var maxIdResult = await db.rawQuery(
     "SELECT MAX(id)+1 as last_inserted_id FROM Expense"
  );
  var id = maxIdResult.first&#91;"last_inserted_id"]; 
  var result = await db.rawInsert(
     "INSERT Into Expense (id, amount, date, category)" 
     " VALUES (?, ?, ?, ?)", &#91;
        id, expense.amount, expense.date.toString(), expense.category
     ]
  );
  return Expense(id, expense.amount, expense.date, expense.category); 
   }
   update(Expense product) async {
  final db = await database; 
  var result = await db.update(
     "Expense", product.toMap(), where: "id = ?", whereArgs: &#91;product.id]
  ); 
  return result; 
   }
   delete(int id) async {
  final db = await database;
  db.delete("Expense", where: "id = ?", whereArgs: &#91;id]);
   }
}

• Here,
  • database is the property to get the SQLiteDbProvider object.
  • initDB is a method used to select and open the SQLite database.
• Create a new file, ExpenseListModel.dart to create ExpenseListModel. The purpose of the model is to hold the complete information of the user expenses in the memory and updating the user interface of the application whenever user’s expense changes in the memory. It is based on Model class from scoped_model package. It has the following properties and methods −
  • _items − private list of expenses.
  • items − getter for _items as UnmodifiableListView<Expense> to prevent unexpected or accidental changes to the list.
  • totalExpense − getter for Total expenses based on the items variable.

double get totalExpense {
   double amount = 0.0; 
   for(var i = 0; i < _items.length; i++) { 
  amount = amount + _items&#91;i].amount; 
   } 
   return amount; 
}

• load − Used to load the complete expenses from database and into the _items variable. It also calls notifyListeners to update the UI.

void load() {
   Future<List<Expense>> 
   list = SQLiteDbProvider.db.getAllExpenses(); 
   list.then( (dbItems) {
  for(var i = 0; i &lt; dbItems.length; i++) { 
     _items.add(dbItems&#91;i]); 
  } notifyListeners(); 
   });
}

• byId − Used to get a particular expenses from _items variable.

Expense byId(int id) { 
   for(var i = 0; i < _items.length; i++) { 
  if(_items&#91;i].id == id) { 
     return _items&#91;i]; 
  } 
   }
   return null; 
}

• add − Used to add a new expense item into the _items variable as well as into the database. It also calls notifyListeners to update the UI.

void add(Expense item) {
   SQLiteDbProvider.db.insert(item).then((val) { 
  _items.add(val); notifyListeners(); 
   }); 
}

• Update − Used to Update expense item into the _items variable as well as into the database. It also calls notifyListeners to update the UI.

void update(Expense item) {
   bool found = false;
   for(var i = 0; i < _items.length; i++) {
  if(_items&#91;i].id == item.id) {
     _items&#91;i] = item; 
     found = true; 
     SQLiteDbProvider.db.update(item); break; 
  } 
   }
   if(found) notifyListeners(); 
}

• delete − Used to remove an existing expense item in the _items variable as well as from the database. It also calls notifyListeners to update the UI.

void delete(Expense item) { 
   bool found = false; 
   for(var i = 0; i < _items.length; i++) {
  if(_items&#91;i].id == item.id) {
     found = true; 
     SQLiteDbProvider.db.delete(item.id); 
     _items.removeAt(i); break; 
  }
   }
   if(found) notifyListeners(); 
}

• The complete code of the ExpenseListModel class is as follows −

import 'dart:collection'; 
import 'package:scoped_model/scoped_model.dart'; 
import 'Expense.dart'; 
import 'Database.dart'; 

class ExpenseListModel extends Model { 
   ExpenseListModel() { 
  this.load(); 
   } 
   final List<Expense> _items = []; 
   UnmodifiableListView<Expense> get items => 
   UnmodifiableListView(_items); 
   
   /*Future<double> get totalExpense { 
  return SQLiteDbProvider.db.getTotalExpense(); 
   }*/ 
   
   double get totalExpense {
  double amount = 0.0;
  for(var i = 0; i &lt; _items.length; i++) { 
     amount = amount + _items&#91;i].amount; 
  } 
  return amount; 
   }
   void load() {
  Future&lt;List&lt;Expense&gt;&gt; list = SQLiteDbProvider.db.getAllExpenses(); 
  list.then( (dbItems) {
     for(var i = 0; i &lt; dbItems.length; i++) {
        _items.add(dbItems&#91;i]); 
     } 
     notifyListeners(); 
  }); 
   }
   Expense byId(int id) {
  for(var i = 0; i &lt; _items.length; i++) { 
     if(_items&#91;i].id == id) { 
        return _items&#91;i]; 
     } 
  }
  return null; 
   }
   void add(Expense item) {
  SQLiteDbProvider.db.insert(item).then((val) {
     _items.add(val);
     notifyListeners();
  }); 
   }
   void update(Expense item) {
  bool found = false; 
  for(var i = 0; i &lt; _items.length; i++) {
     if(_items&#91;i].id == item.id) {
        _items&#91;i] = item; 
        found = true; 
        SQLiteDbProvider.db.update(item); 
        break; 
     }
  }
  if(found) notifyListeners(); 
   }
   void delete(Expense item) {
  bool found = false; 
  for(var i = 0; i &lt; _items.length; i++) {
     if(_items&#91;i].id == item.id) {
        found = true; 
        SQLiteDbProvider.db.delete(item.id); 
        _items.removeAt(i); break; 
     }
  }
  if(found) notifyListeners(); 
   }
}

• Open main.dart file. Import the classes as specified below −

import 'package:flutter/material.dart'; 
import 'package:scoped_model/scoped_model.dart'; 
import 'ExpenseListModel.dart'; 
import 'Expense.dart';

• Add main function and call runApp by passing ScopedModel<ExpenseListModel> widget.

void main() { 
   final expenses = ExpenseListModel(); 
   runApp(
  ScopedModel<ExpenseListModel>(model: expenses, child: MyApp(),)
   );
}

• Here,
  • expenses object loads all the user expenses information from the database. Also, when the application is opened for the first time, it will create the required database with proper tables.
  • ScopedModel provides the expense information during the whole life cycle of the application and ensures the maintenance of state of the application at any instance. It enables us to use StatelessWidget instead of StatefulWidget.
• Create a simple MyApp using MaterialApp widget.

class MyApp extends StatelessWidget {
   // This widget is the root of your application. 
   @override 
   Widget build(BuildContext context) {
  return MaterialApp(
     title: 'Expense',
     theme: ThemeData(
        primarySwatch: Colors.blue, 
     ), 
     home: MyHomePage(title: 'Expense calculator'), 
  );
   }
}

• Create MyHomePage widget to display all the user’s expense information along with total expenses at the top. Floating button at the bottom right corner will be used to add new expenses.

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   @override 
   Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar( 
        title: Text(this.title), 
     ), 
     body: ScopedModelDescendant<ExpenseListModel>(
        builder: (context, child, expenses) {
           return ListView.separated(
              itemCount: expenses.items == null ? 1 
              : expenses.items.length + 1, 
              itemBuilder: (context, index) { 
                 if (index == 0) { 
                    return ListTile(
                       title: Text("Total expenses: " 
                       + expenses.totalExpense.toString(), 
                       style: TextStyle(fontSize: 24,
                       fontWeight: FontWeight.bold),) 
                    );
                 } else {
                    index = index - 1; 
                    return Dismissible( 
                       key: Key(expenses.items[index].id.toString()), 
                          onDismissed: (direction) { 
                          expenses.delete(expenses.items[index]); 
                          Scaffold.of(context).showSnackBar(
                             SnackBar(
                                content: Text(
                                   "Item with id, " 
                                   + expenses.items[index].id.toString() + 
                                   " is dismissed"
                                )
                             )
                          ); 
                       },
                       child: ListTile( onTap: () { 
                          Navigator.push(
                             context, MaterialPageRoute(
                                builder: (context) => FormPage(
                                   id: expenses.items[index].id,
                                   expenses: expenses, 
                                )
                             )
                          );
                       }, 
                       leading: Icon(Icons.monetization_on), 
                       trailing: Icon(Icons.keyboard_arrow_right), 
                       title: Text(expenses.items[index].category + ": " + 
                       expenses.items[index].amount.toString() + 
                       " \nspent on " + expenses.items[index].formattedDate, 
                       style: TextStyle(fontSize: 18, fontStyle: FontStyle.italic),))
                    ); 
                 }
              },
              separatorBuilder: (context, index) { 
                 return Divider(); 
              }, 
           );
        },
     ),
     floatingActionButton: ScopedModelDescendant<ExpenseListModel>(
        builder: (context, child, expenses) {
           return FloatingActionButton( onPressed: () {
              Navigator.push( 
                 context, MaterialPageRoute(
                    builder: (context) => ScopedModelDescendant<ExpenseListModel>(
                       builder: (context, child, expenses) { 
                          return FormPage( id: 0, expenses: expenses, ); 
                       }
                    )
                 )
              ); 
              // expenses.add(new Expense( 
                 // 2, 1000, DateTime.parse('2019-04-01 11:00:00'), 'Food')
              ); 
              // print(expenses.items.length); 
           },
           tooltip: 'Increment', child: Icon(Icons.add), ); 
        }
     )
  );
   }
}

• Here,
  • ScopedModelDescendant is used to pass the expense model into the ListView and FloatingActionButton widget.
  • ListView.separated and ListTile widget is used to list the expense information.
  • Dismissible widget is used to delete the expense entry using swipe gesture.
  • Navigator is used to open edit interface of an expense entry. It can be activated by tapping an expense entry.
• Create a FormPage widget. The purpose of the FormPage widget is to add or update an expense entry. It handles expense entry validation as well.

class FormPage extends StatefulWidget { 
   FormPage({Key key, this.id, this.expenses}) : super(key: key); 
   final int id; 
   final ExpenseListModel expenses; 
   
   @override _FormPageState createState() => _FormPageState(id: id, expenses: expenses); 
}
class _FormPageState extends State<FormPage> {
   _FormPageState({Key key, this.id, this.expenses}); 
   
   final int id; 
   final ExpenseListModel expenses; 
   final scaffoldKey = GlobalKey<ScaffoldState>(); 
   final formKey = GlobalKey<FormState>(); 
   
   double _amount; 
   DateTime _date; 
   String _category; 
   
   void _submit() {
  final form = formKey.currentState; 
  if (form.validate()) {
     form.save(); 
     if (this.id == 0) expenses.add(Expense(0, _amount, _date, _category)); 
        else expenses.update(Expense(this.id, _amount, _date, _category)); 
     Navigator.pop(context); 
  }
   }
   @override 
   Widget build(BuildContext context) {
  return Scaffold(
     key: scaffoldKey, appBar: AppBar(
        title: Text('Enter expense details'),
     ), 
     body: Padding(
        padding: const EdgeInsets.all(16.0), 
        child: Form(
           key: formKey, child: Column(
              children: &#91;
                 TextFormField( 
                    style: TextStyle(fontSize: 22), 
                    decoration: const InputDecoration( 
                       icon: const Icon(Icons.monetization_on), 
                       labelText: 'Amount', 
                       labelStyle: TextStyle(fontSize: 18)
                    ), 
                    validator: (val) {
                       Pattern pattern = r'^&#91;1-9]\d*(\.\d+)?$'; 
                       RegExp regex = new RegExp(pattern); 
                       if (!regex.hasMatch(val)) 
                       return 'Enter a valid number'; else return null; 
                    }, 
                    initialValue: id == 0 
                    ? '' : expenses.byId(id).amount.toString(), 
                    onSaved: (val) =&gt; _amount = double.parse(val), 
                 ), 
                 TextFormField( 
                    style: TextStyle(fontSize: 22), 
                    decoration: const InputDecoration( 
                       icon: const Icon(Icons.calendar_today),
                       hintText: 'Enter date', 
                       labelText: 'Date', 
                       labelStyle: TextStyle(fontSize: 18), 
                    ), 
                    validator: (val) {
                       Pattern pattern = r'^((?:19|20)\d\d)&#91;- /.]
                          (0&#91;1-9]|1&#91;012])&#91;- /.](0&#91;1-9]|&#91;12]&#91;0-9]|3&#91;01])$'; 
                       RegExp regex = new RegExp(pattern); 
                       if (!regex.hasMatch(val)) 
                          return 'Enter a valid date'; 
                       else return null; 
                    },
                    onSaved: (val) =&gt; _date = DateTime.parse(val), 
                    initialValue: id == 0 
                    ? '' : expenses.byId(id).formattedDate, 
                    keyboardType: TextInputType.datetime, 
                 ),
                 TextFormField(
                    style: TextStyle(fontSize: 22), 
                    decoration: const InputDecoration(
                       icon: const Icon(Icons.category),
                       labelText: 'Category', 
                       labelStyle: TextStyle(fontSize: 18)
                    ),
                    onSaved: (val) =&gt; _category = val, 
                    initialValue: id == 0 ? '' 
                    : expenses.byId(id).category.toString(),
                 ), 
                 RaisedButton( 
                    onPressed: _submit, 
                    child: new Text('Submit'), 
                 ), 
              ],
           ),
        ),
     ),
  );
   }
}

• Here,
  • TextFormField is used to create form entry.
  • validator property of TextFormField is used to validate the form element along with RegEx patterns.
  • _submit function is used along with expenses object to add or update the expenses into the database.
• The complete code of the main.dart file is as follows −

import 'package:flutter/material.dart'; 
import 'package:scoped_model/scoped_model.dart'; 
import 'ExpenseListModel.dart'; 
import 'Expense.dart'; 

void main() { 
   final expenses = ExpenseListModel(); 
   runApp(
  ScopedModel<ExpenseListModel>(
     model: expenses, child: MyApp(), 
  )
   ); 
}
class MyApp extends StatelessWidget {
   // This widget is the root of your application. 
   @override
   Widget build(BuildContext context) {
  return MaterialApp(
     title: 'Expense',
     theme: ThemeData(
        primarySwatch: Colors.blue, 
     ), 
     home: MyHomePage(title: 'Expense calculator'), 
  );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override 
   Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar(
        title: Text(this.title),
     ),
     body: ScopedModelDescendant<ExpenseListModel>(
        builder: (context, child, expenses) { 
           return ListView.separated(
              itemCount: expenses.items == null ? 1 
              : expenses.items.length + 1, itemBuilder: (context, index) { 
                 if (index == 0) { 
                    return ListTile( title: Text("Total expenses: " 
                    + expenses.totalExpense.toString(), 
                    style: TextStyle(fontSize: 24,fontWeight: 
                    FontWeight.bold),) ); 
                 } else {
                    index = index - 1; return Dismissible(
                       key: Key(expenses.items[index].id.toString()), 
                       onDismissed: (direction) {
                          expenses.delete(expenses.items[index]); 
                          Scaffold.of(context).showSnackBar(
                             SnackBar(
                                content: Text(
                                   "Item with id, " + 
                                   expenses.items[index].id.toString() 
                                   + " is dismissed"
                                )
                             )
                          );
                       }, 
                       child: ListTile( onTap: () {
                          Navigator.push( context, MaterialPageRoute(
                             builder: (context) => FormPage(
                                id: expenses.items[index].id, expenses: expenses, 
                             )
                          ));
                       }, 
                       leading: Icon(Icons.monetization_on), 
                       trailing: Icon(Icons.keyboard_arrow_right), 
                       title: Text(expenses.items[index].category + ": " + 
                       expenses.items[index].amount.toString() + " \nspent on " + 
                       expenses.items[index].formattedDate, 
                       style: TextStyle(fontSize: 18, fontStyle: FontStyle.italic),))
                    );
                 }
              }, 
              separatorBuilder: (context, index) {
                 return Divider(); 
              },
           ); 
        },
     ),
     floatingActionButton: ScopedModelDescendant<ExpenseListModel>(
        builder: (context, child, expenses) {
           return FloatingActionButton(
              onPressed: () {
                 Navigator.push(
                    context, MaterialPageRoute(
                       builder: (context)
                       => ScopedModelDescendant<ExpenseListModel>(
                          builder: (context, child, expenses) { 
                             return FormPage( id: 0, expenses: expenses, ); 
                          }
                       )
                    )
                 );
                 // expenses.add(
                    new Expense(
                       // 2, 1000, DateTime.parse('2019-04-01 11:00:00'), 'Food'
                    )
                 );
                 // print(expenses.items.length); 
              },
              tooltip: 'Increment', child: Icon(Icons.add), 
           );
        }
     )
  );
   } 
}
class FormPage extends StatefulWidget {
   FormPage({Key key, this.id, this.expenses}) : super(key: key); 
   final int id; 
   final ExpenseListModel expenses; 
   
   @override 
   _FormPageState createState() => _FormPageState(id: id, expenses: expenses); 
}
class _FormPageState extends State<FormPage> {
   _FormPageState({Key key, this.id, this.expenses}); 
   final int id; 
   final ExpenseListModel expenses; 
   final scaffoldKey = GlobalKey<ScaffoldState>(); 
   final formKey = GlobalKey<FormState>(); 
   double _amount; DateTime _date; 
   String _category;
   void _submit() {
  final form = formKey.currentState; 
  if (form.validate()) {
     form.save(); 
     if (this.id == 0) expenses.add(Expense(0, _amount, _date, _category)); 
     else expenses.update(Expense(this.id, _amount, _date, _category)); 
     Navigator.pop(context); 
  } 
   } 
   @override 
   Widget build(BuildContext context) {
  return Scaffold(
     key: scaffoldKey, appBar: AppBar( 
        title: Text('Enter expense details'), 
     ), 
     body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
           key: formKey, child: Column(
              children: &#91;
                 TextFormField(
                    style: TextStyle(fontSize: 22), 
                    decoration: const InputDecoration( 
                       icon: const Icon(Icons.monetization_on), 
                       labelText: 'Amount', 
                       labelStyle: TextStyle(fontSize: 18)
                    ), 
                    validator: (val) {
                       Pattern pattern = r'^&#91;1-9]\d*(\.\d+)?$'; 
                       RegExp regex = new RegExp(pattern); 
                       if (!regex.hasMatch(val)) return 'Enter a valid number'; 
                       else return null; 
                    },
                    initialValue: id == 0 ? '' 
                    : expenses.byId(id).amount.toString(), 
                    onSaved: (val) =&gt; _amount = double.parse(val), 
                 ),
                 TextFormField(
                    style: TextStyle(fontSize: 22), 
                    decoration: const InputDecoration(
                       icon: const Icon(Icons.calendar_today), 
                       hintText: 'Enter date', 
                       labelText: 'Date', 
                       labelStyle: TextStyle(fontSize: 18), 
                    ),
                    validator: (val) {
                       Pattern pattern = r'^((?:19|20)\d\d)&#91;- /.]
                       (0&#91;1-9]|1&#91;012])&#91;- /.](0&#91;1-9]|&#91;12]&#91;0-9]|3&#91;01])$'; 
                       RegExp regex = new RegExp(pattern); 
                       if (!regex.hasMatch(val)) return 'Enter a valid date'; 
                       else return null; 
                    },
                    onSaved: (val) =&gt; _date = DateTime.parse(val), 
                    initialValue: id == 0 ? '' : expenses.byId(id).formattedDate, 
                    keyboardType: TextInputType.datetime, 
                 ),
                 TextFormField(
                    style: TextStyle(fontSize: 22), 
                    decoration: const InputDecoration(
                       icon: const Icon(Icons.category), 
                       labelText: 'Category', 
                       labelStyle: TextStyle(fontSize: 18)
                    ), 
                    onSaved: (val) =&gt; _category = val, 
                    initialValue: id == 0 ? '' : expenses.byId(id).category.toString(), 
                 ),
                 RaisedButton(
                    onPressed: _submit, 
                    child: new Text('Submit'), 
                 ),
              ],
           ),
        ),
     ),
  );
   }
}

• Now, run the application.
• Add new expenses using floating button.
• Edit existing expenses by tapping the expense entry.
• Delete the existing expenses by swiping the expense entry in either direction.

Some of the screen shots of the application are as follows −

This chapter explains how to deploy Flutter application in both Android and iOS platforms.

Android Application

• Change the application name using android:label entry in android manifest file. Android app manifest file, AndroidManifest.xml is located in <app dir>/android/app/src/main. It contains entire details about an android application. We can set the application name using android:label entry.
• Change launcher icon using android:icon entry in manifest file.
• Sign the app using standard option as necessary.
• Enable Proguard and Obfuscation using standard option, if necessary.
• Create a release APK file by running below command −

cd /path/to/my/application 
flutter build apk

• You can see an output as shown below −

Initializing gradle...                                            8.6s 
Resolving dependencies...                                        19.9s 
Calling mockable JAR artifact transform to create file: 
/Users/.gradle/caches/transforms-1/files-1.1/android.jar/ 
c30932f130afbf3fd90c131ef9069a0b/android.jar with input 
/Users/Library/Android/sdk/platforms/android-28/android.jar 
Running Gradle task 'assembleRelease'... 
Running Gradle task 'assembleRelease'... 
Done                                                             85.7s 
Built build/app/outputs/apk/release/app-release.apk (4.8MB).

• Install the APK on a device using the following command −

flutter install

• Publish the application into Google Playstore by creating an appbundle and push it into playstore using standard methods.

flutter build appbundle

iOS Application

• Register the iOS application in App Store Connect using standard method. Save the =Bundle ID used while registering the application.
• Update Display name in the XCode project setting to set the application name.
• Update Bundle Identifier in the XCode project setting to set the bundle id, which we used in step 1.
• Code sign as necessary using standard method.
• Add a new app icon as necessary using standard method.
• Generate IPA file using the following command −

flutter build ios

• Now, you can see the following output −

Building com.example.MyApp for device (ios-release)... 
Automatically signing iOS for device deployment 
using specified development team in Xcode project: 
Running Xcode build...                                   23.5s 
......................

• Test the application by pushing the application, IPA file into TestFlight using standard method.
• Finally, push the application into App Store using standard method.

Testing is very important phase in the development life cycle of an application. It ensures that the application is of high quality. Testing requires careful planning and execution. It is also the most time consuming phase of the development.

Dart language and Flutter framework provides extensive support for the automated testing of an application.

Types of Testing

Generally, three types of testing processes are available to completely test an application. They are as follows −

Unit Testing

Unit testing is the easiest method to test an application. It is based on ensuring the correctness of a piece of code (a function, in general) o a method of a class. But, it does not reflect the real environment and subsequently, is the least option to find the bugs.

Widget Testing

Widget testing is based on ensuring the correctness of the widget creation, rendering and interaction with other widgets as expected. It goes one step further and provides near real-time environment to find more bugs.

Integration Testing

Integration testing involves both unit testing and widget testing along with external component of the application like database, web service, etc., It simulates or mocks the real environment to find nearly all bugs, but it is the most complicated process.

Flutter provides support for all types of testing. It provides extensive and exclusive support for Widget testing. In this chapter, we will discuss widget testing in detail.

Widget Testing

Flutter testing framework provides testWidgets method to test widgets. It accepts two arguments −

• Test description
• Test code

testWidgets('test description: find a widget', '<test code>');

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Steps Involved

Widget Testing involves three distinct steps −

• Render the widget in the testing environment.
• WidgetTester is the class provided by Flutter testing framework to build and renders the widget. pumpWidget method of the WidgetTester class accepts any widget and renders it in the testing environment.

testWidgets('finds a specific instance', (WidgetTester tester) async { 
   await tester.pumpWidget(MaterialApp( 
  home: Scaffold( 
     body: Text('Hello'), 
  ), 
   )); 
});

• Finding the widget, which we need to test.
  • Flutter framework provides many options to find the widgets rendered in the testing environment and they are generally called Finders. The most frequently used finders are find.text, find.byKey and find.byWidget.
    • find.text finds the widget that contains the specified text.

find.text('Hello')

• find.byKey find the widget by its specific key.

find.byKey('home')

• find.byWidget find the widget by its instance variable.

find.byWidget(homeWidget)

• Ensuring the widget works as expected.
• Flutter framework provides many options to match the widget with the expected widget and they are normally called Matchers. We can use the expect method provided by the testing framework to match the widget, which we found in the second step with our our expected widget by choosing any of the matchers. Some of the important matchers are as follows.
  • findsOneWidget − verifies a single widget is found.

expect(find.text('Hello'), findsOneWidget);

• findsNothing − verifies no widgets are found

expect(find.text('Hello World'), findsNothing);

• findsWidgets − verifies more than a single widget is found.

expect(find.text('Save'), findsWidgets);

• findsNWidgets − verifies N number of widgets are found.

expect(find.text('Save'), findsNWidgets(2));

The complete test code is as follows −

testWidgets('finds hello widget', (WidgetTester tester) async { 
   await tester.pumpWidget(MaterialApp( 
  home: Scaffold( 
     body: Text('Hello'), 
  ), 
   )); 
   expect(find.text('Hello'), findsOneWidget); 
});

Here, we rendered a MaterialApp widget with text Hello using Text widget in its body. Then, we used find.text to find the widget and then matched it using findsOneWidget.

Working Example

Let us create a simple flutter application and write a widget test to understand better the steps involved and the concept.

• Create a new flutter application, flutter_test_app in Android studio.
• Open widget_test.dart in test folder. It has a sample testing code as given below −

testWidgets('Counter increments smoke test', (WidgetTester tester) async {
   // Build our app and trigger a frame. 
   await tester.pumpWidget(MyApp()); 
   
   // Verify that our counter starts at 0. 
   expect(find.text('0'), findsOneWidget); 
   expect(find.text('1'), findsNothing); 
   
   // Tap the '+' icon and trigger a frame. 
   await tester.tap(find.byIcon(Icons.add)); 
   await tester.pump(); 
   
   // Verify that our counter has incremented. 
   expect(find.text('0'), findsNothing); 
   expect(find.text('1'), findsOneWidget); 
});

• Here, the test code does the following functionalities −
  • Renders MyApp widget using tester.pumpWidget.
  • Ensures that the counter is initially zero using findsOneWidget and findsNothing matchers.
  • Finds the counter increment button using find.byIcon method.
  • Taps the counter increment button using tester.tap method.
  • Ensures that the counter is increased using findsOneWidget and findsNothing matchers.
• Let us again tap the counter increment button and then check whether the counter is increased to two.

await tester.tap(find.byIcon(Icons.add)); 
await tester.pump(); 

expect(find.text('2'), findsOneWidget);

• Click Run menu.
• Click tests in widget_test.dart option. This will run the test and report the result in the result window.

Nowadays, mobile applications are used by customers from different countries and as a result, applications are required to display the content in different languages. Enabling an application to work in multiple languages is called Internationalizing the application.

For an application to work in different languages, it should first find the current locale of the system in which the application is running and then need to show it’s content in that particular locale, and this process is called Localization.

Flutter framework provides three base classes for localization and extensive utility classes derived from base classes to localize an application.

The base classes are as follows −

• Locale − Locale is a class used to identify the user’s language. For example, en-us identifies the American English and it can be created as.

Locale en_locale = Locale('en', 'US')

Here, the first argument is language code and the second argument is country code. Another example of creating Argentina Spanish (es-ar) locale is as follows −

Locale es_locale = Locale('es', 'AR')

• Localizations − Localizations is a generic widget used to set the Locale and the localized resources of its child.

class CustomLocalizations { 
   CustomLocalizations(this.locale); 
   final Locale locale; 
   static CustomLocalizations of(BuildContext context) { 
  return Localizations.of<CustomLocalizations>(context, CustomLocalizations); 
   } 
   static Map<String, Map<String, String>> _resources = {
  'en': {
     'title': 'Demo', 
     'message': 'Hello World' 
  }, 
  'es': {
     'title': 'Manifestación', 
     'message': 'Hola Mundo', 
  }, 
   }; 
   String get title { 
  return _resources&#91;locale.languageCode]&#91;'title']; 
   }
   String get message { 
  return _resources&#91;locale.languageCode]&#91;'message']; 
   } 
}

• Here, CustomLocalizations is a new custom class created specifically to get certain localized content (title and message) for the widget. of method uses the Localizations class to return new CustomLocalizations class.
• LocalizationsDelegate − LocalizationsDelegate is a factory class through which Localizations widget is loaded. It has three over-ridable methods −
  • isSupported − Accepts a locale and return whether the specified locale is supported or not.

@override 
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);

• load − Accepts a locale and start loading the resources for the specified locale.

@override 
Future<CustomLocalizations> load(Locale locale) { 
   return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale)); 
}

• shouldReload − Specifies whether reloading of CustomLocalizations is necessary when its Localizations widget is rebuild.

@override 
bool shouldReload(CustomLocalizationsDelegate old) => false;

• The complete code of CustomLocalizationDelegate is as follows −

class CustomLocalizationsDelegate extends 
LocalizationsDelegate<CustomLocalizations> { 
   const CustomLocalizationsDelegate(); 
   @override 
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
   @override 
   Future<CustomLocalizations> load(Locale locale) { 
  return SynchronousFuture&lt;CustomLocalizations&gt;(CustomLocalizations(locale));
   } 
   @override bool shouldReload(CustomLocalizationsDelegate old) => false; 
}

In general, Flutter applications are based on two root level widgets, MaterialApp or WidgetsApp. Flutter provides ready made localization for both widgets and they are MaterialLocalizations and WidgetsLocaliations. Further, Flutter also provides delegates to load MaterialLocalizations and WidgetsLocaliations and they are GlobalMaterialLocalizations.delegate and GlobalWidgetsLocalizations.delegate respectively.

Let us create a simple internationalization enabled application to test and understand the concept.

• Create a new flutter application, flutter_localization_app.
• Flutter supports the internationalization using exclusive flutter package, flutter_localizations. The idea is to separate the localized content from the main SDK. Open the pubspec.yaml and add below code to enable the internationalization package −

dependencies: 
   flutter: 
  sdk: flutter 
   flutter_localizations:
  sdk: flutter

• Android studio will display the following alert that the pubspec.yaml is updated.

• Click Get dependencies option. Android studio will get the package from Internet and properly configure it for the application.
• Import flutter_localizations package in the main.dart as follows −

import 'package:flutter_localizations/flutter_localizations.dart'; 
import 'package:flutter/foundation.dart' show SynchronousFuture;

• Here, the purpose of SynchronousFuture is to load the custom localizations synchronously.
• Create a custom localizations and its corresponding delegate as specified below −

class CustomLocalizations { 
   CustomLocalizations(this.locale); 
   final Locale locale; 
   static CustomLocalizations of(BuildContext context) {
  return Localizations.of<CustomLocalizations>(context, CustomLocalizations); 
   }
   static Map<String, Map<String, String>> _resources = {
  'en': {
     'title': 'Demo', 
     'message': 'Hello World' 
  }, 
  'es': { 
     'title': 'Manifestación', 
     'message': 'Hola Mundo', 
  }, 
   }; 
   String get title { 
  return _resources&#91;locale.languageCode]&#91;'title']; 
   } 
   String get message { 
  return _resources&#91;locale.languageCode]&#91;'message']; 
   } 
}
class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();
   
   @override 
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode); 
   
   @override 
   Future<CustomLocalizations> load(Locale locale) { 
  return SynchronousFuture&lt;CustomLocalizations&gt;(CustomLocalizations(locale)); 
   } 
   @override bool shouldReload(CustomLocalizationsDelegate old) => false; 
}

• Here, CustomLocalizations is created to support localization for title and message in the application and CustomLocalizationsDelegate is used to load CustomLocalizations.
• Add delegates for MaterialApp, WidgetsApp and CustomLocalization using MaterialApp properties, localizationsDelegates and supportedLocales as specified below −

localizationsDelegates: [
   const CustomLocalizationsDelegate(),   
   GlobalMaterialLocalizations.delegate, 
   GlobalWidgetsLocalizations.delegate, 
], 
supportedLocales: [
   const Locale('en', ''),
   const Locale('es', ''), 
],

• Use CustomLocalizations method, of to get the localized value of title and message and use it in appropriate place as specified below −

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   @override 
   Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar(title: Text(CustomLocalizations .of(context) .title), ), 
     body: Center(
        child: Column(
           mainAxisAlignment: MainAxisAlignment.center, 
           children: <Widget>[ 
              Text( CustomLocalizations .of(context) .message, ), 
           ], 
        ), 
     ),
  );
   }
}

• Here, we have modified the MyHomePage class from StatefulWidget to StatelessWidget for simplicity reason and used the CustomLocalizations to get title and message.
• Compile and run the application. The application will show its content in English.
• Close the application. Go to Settings → System → Languages and Input → Languages*.
• Click Add a language option and select Spanish. This will install Spanish language and then list it as one of the option.
• Select Spanish and move it above English. This will set as Spanish as first language and everything will be changed to Spanish text.
• Now relaunch the internationalization application and you will see the title and message in Spanish language.
• We can revert the language to English by move the English option above Spanish option in the setting.
• The result of the application (in Spanish) is shown in the screenshot given below −

Using intl Package

Flutter provides intl package to further simplify the development of localized mobile application. intl package provides special methods and tools to semi-auto generate language specific messages.

Let us create a new localized application by using intl package and understand the concept.

• Create a new flutter application, flutter_intl_app.
• Open pubspec.yaml and add the package details.

dependencies: 
   flutter: 
  sdk: flutter 
   flutter_localizations: 
  sdk: flutter 
   intl: ^0.15.7 
   intl_translation: ^0.17.3

• Android studio will display the alert as shown below informing that the pubspec.yaml is updated.

• Click Get dependencies option. Android studio will get the package from Internet and properly configure it for the application.
• Copy the main.dart from previous sample, flutter_internationalization_app.
• Import the intl pacakge as shown below −

import 'package:intl/intl.dart';

• Update the CustomLocalization class as shown in the code given below −

class CustomLocalizations { 
   static Future<CustomLocalizations> load(Locale locale) {
  final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString(); 
  final String localeName = Intl.canonicalizedLocale(name); 
  
  return initializeMessages(localeName).then((_) {
     Intl.defaultLocale = localeName; 
     return CustomLocalizations(); 
  }); 
   } 
   static CustomLocalizations of(BuildContext context) { 
  return Localizations.of&lt;CustomLocalizations&gt;(context, CustomLocalizations); 
   } 
   String get title {
  return Intl.message( 
     'Demo', 
     name: 'title', 
     desc: 'Title for the Demo application', 
  ); 
   }
   String get message{
  return Intl.message(
     'Hello World', 
     name: 'message', 
     desc: 'Message for the Demo application', 
  ); 
   }
}
class CustomLocalizationsDelegate extends 
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();
   
   @override
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode); 
   @override 
   Future<CustomLocalizations> load(Locale locale) { 
  return CustomLocalizations.load(locale); 
   } 
   @override 
   bool shouldReload(CustomLocalizationsDelegate old) => false; 
}

• Here, we have used three methods from the intl package instead of custom methods. Otherwise, the concepts are same.
  • Intl.canonicalizedLocale − Used to get correct locale name.
  • Intl.defaultLocale − Used to set current locale
  • Intl.message − Used to define new messages.
• import l10n/messages_all.dart file. We will generate this file shortly

import 'l10n/messages_all.dart';

• Now, create a folder, lib/l10n
• Open a command prompt and go to application root directory (where pubspec.yaml is available) and run the following command −

flutter packages pub run intl_translation:extract_to_arb --output-
   dir=lib/l10n lib/main.dart

• Here, the command will generate, intl_message.arb file, a template to create message in different locale. The content of the file is as follows −

{
   "@@last_modified": "2019-04-19T02:04:09.627551", 
   "title": "Demo", 
   "@title": {
  "description": "Title for the Demo application", 
  "type": "text", 
  "placeholders": {} 
   }, 
   "message": "Hello World", 
   "@message": {
  "description": "Message for the Demo 
  application", 
  "type": "text", 
  "placeholders": {} 
   }
}

• Copy intl_message.arb and create new file, intl_en.arb.
• Copy intl_message.arb and create new file, intl_es.arb and change the content to Spanish language as shown below −

{
   "@@last_modified": "2019-04-19T02:04:09.627551",  
   "title": "Manifestación", 
   "@title": {
  "description": "Title for the Demo application", 
  "type": "text", 
  "placeholders": {} 
   },
   "message": "Hola Mundo",
   "@message": {
  "description": "Message for the Demo application", 
  "type": "text", 
  "placeholders": {} 
   } 
}

• Now, run the following command to create final message file, messages_all.dart.

flutter packages pub run intl_translation:generate_from_arb 
--output-dir=lib\l10n --no-use-deferred-loading 
lib\main.dart lib\l10n\intl_en.arb lib\l10n\intl_es.arb

• Compile and run the application. It will work similar to above application, flutter_localization_app.