Flutter Tutorial: Building An Expense Manager App – 2

This is the second part of Expenses Manager app in Flutter tutorial series. We will learn to use built_value and built_collection in this part.

Introduction

In the previous post, we started out building the Expense Manager app. In this post, we will continue the development where we left off. We will add features to manage expense categories in this part of the Flutter tutorial.

At the end of this Flutter tutorial, we will have the following in our app:

  • Create built value model for category
  • View list of category items
  • Setup offline database for storing data
  • Create a service layer to access database

Let’s get started!

Creating Category Model

Every app needs data models. For our app we start with a category model which will be a built value type model. A built value type model has many benefits over reference type such as immutability and easy json serialization.

Read more about Built Value: Introduction To Built Value Library

Add dependency for built_value and built_collection packages.

Also add build_runner and built_value_generator as dev dependencies.

Next, we will create a category model and a built value serializer.

Create a folder called “models” inside the “lib” folder and add a file “category_model.dart“.

We are marking everything nullable for now. Next add “serializers.dart“.

Read More: JSON Serialization In Flutter.

Become A Flutter Expert With This Course

Both the category_model and serilizers are partial files. We will auto generate the remaining part of these files using the build runner command:

This command generates the remaining part of the built value classes in the models folder.

Our category model is ready.

Initialize And View Category List

Now that we have a working model, let’s put it into action. Inside the _HomePageState class, let’s first initialize a list of categories.

We have added 4 categories in a list so far. Next, we will create a ListView to show these items.

The _getCategoryTab function creates a list based on the items available in the _lsCategories. When you use this list for the category tab, you can see the view in action.

A Category List In ListView
A Category List In ListView

That was quite simple. But this is just a static list of items. In a real application, we need to fetch data from a persistent database.

Setup Offline Database In Flutter

In this Flutter tutorial, we will be storing all our data in an offline database. For this purpose, we will make use of the SQLite database engine.

Get SQLite Plugin For Flutter

We will be using the “sqflite” plugin, which is a Flutter plugin for SQLite database engine. To use this plugin, we need to add dependency to it in the pubspec.yaml file.

We will also add a dependency for another plugin “path_provider” which can help us with local file system.

Usually, when you save the pubspec.yaml file, the plugin automatically gets downloaded. If it doesn’t, you can install the package by calling the following command from command line:

Setup Offline DB Provider For SQLite

We have already covered setting up a SQLite database in Flutter app in a previous post. So, here we will jump directly into implementation without much description.

Basically, we will have a database provider, database migration scripts and later a database access service.

Create a folder “db” inside the “lib” folder and another folder “migrations” inside the “db“.

Inside the “migrations” folder, add a file called init_db.dart.

Here, we created a SQL script for category table. The category table has a title, a description and icon code point to create IconData.

Next, create another file “db_script.dart” which will hold a list of all database migration scripts.

Next, create another file “offline_db_provider.dart” inside the db folder.

The OfflineDbProvider is responsible for creating and updating the offline database. For adding migrations on the database, now all we have to do is add scripts via db_script.dart file.

Finally, to initialize the database when the application first runs, update the main.dart file’s main method as below:

Building A Service Layer For SQLite Database In Flutter

Create a new folder “services” inside the “db” folder and add a file “category_service.dart“. This file will contain an abstract class which will act as an interface and an implementation for the abstract class.

The class CategoryService implements the abstract class CategoryServiceBase.

Right now we only have two methods to interact with the SQLite database:

  • create a new row of category item
  • fetch the list of category items

Notice that we are working with BuiltList instead of a regular list.

Implementing the abstract class, the code for creating a new category will look like this:

If same titled category doesn’t exist, then we create a new one. Similarly, here’s the implementation for getAllCategories:

Here, we are deserializing the category list from SQLite database with the help of built value serializer.

Our basic service layer is ready for now.

Wrapping Up

So far, we have created a basic category model, added SQLite database provider and a service layer to access category table. In the next part of this Flutter tutorial series, we will add more features to the Expense Manager app.

We will learn introduce the BLoC pattern, Inherited widgets, and Stream Builders. Stay tuned!

Part 1

Part 3

About the author