Flutter Tutorial: Building An Expense Manager App – 4

This is the fourth part of Flutter tutorial series where we are building an Expenses Manager app.

Introduction

In our previous post of the Flutter tutorial series, we created a page to add new category. In this part, we will finish off the creating expense category of the application. We will be implementing the BLoC pattern for this purpose.

At the end, we will have achieved the following:

Add Category Complete
Add Category Complete

You can find the entire code for “add_category.dart“, “category_page.dart” and “category_bloc.dart” at the end of this tutorial.

Setup BLoC For Expense Category

BLoC stands for Business Logic Component. The core principle behind the BLoC pattern is to separate business logic code from UI design and interaction. It helps to deliver events/data from network to UI screens and vice-versa.

Learn More About Blocs:

Let’s create a new folder called “blocs” inside the “lib” folder and add a file “category_bloc.dart” in it.

The CategoryBloc is just a regular class. It takes an object of CategoryService class in the constructor which communicates with the database layer.

CategoryBloc will mainly be responsible for creating new expense category as well as fetching list of categories. All the the data interaction and flow will be done via data streams.

Making Use Of RxDart Package

Although Dart has pretty good support for data streams, the RxDart package enhances Dart’s capabilities. So, let’s add dependency for the package.

Add a controller that will be used to manage Category stream.

Create a method to insert CategoryModel into the stream.

Become A Flutter Expert With This Course

Next, we will make following changes on the AddCategory widget:

  • Make it into a stateful widget
  • Create an instance of CategoryBloc
  • Use StreamBuilder to work with CategoryModel stream

We have replaced the content of build method from previous post with the StreamBuilder. The StreamBuilder listens to stream _categoryBloc.createCategoryStream.

Working With StreamBuilder In Flutter

StreamBuilder widget is very useful when working with stream of data and observables in Flutter. It rebuilds itself whenever the data stream is changed.

We will update the value of category stream as user enters values for title, description and icon fields.

Learn More About StreamBuilder here: Implement BLoC Pattern With TextField

Input For Title And Description Fields

Previously, the widget for “Title” text field looked like this:

Now, we will make use of the onChanged handler for this TextField so that we can update the category stream.

The categorySnap.data provides the current value for CategoryModel. This value is then updated and then the model itself is passed to stream controller to be get updated.

Following the same technique for “Description” field as well, we can have:

Flutter Icon Picker

Now that we have the values for category title and description in place, next we need to get value for selected icon.

For this, we will use the onPressed handler of IconButton widget. Once the value is updated, we will also need to make sure we change the selected icon’s color as well.

Output

Category Icon Selection
Category Icon Selection

As can be seen, we have an icon picker ready for the Flutter app! Now we need to save this in our database.

Saving Created Expense Category

Let’s add a method in the CategoryBloc to create category.

This method calls the categoryService.createCategory and returns the result.

Now add a button to call this method.

The “Create” button gets enabled only after the category title is entered by the user. Once category is created, we pop back to previous screen.

Update Category List Items

Previously we had shown a static list of items in the category tab screen. Now, we will update this screen so that we show the created categories from database.

Create a stream of category list in the CategoryBloc.

Initialize the category list.

Use StreamBuilder to get the list of category items in the CategoryPage.

Complete Code For Each Page

CategoryBloc

AddCategory

CategoryPage

Link To Other Parts Of This Flutter Tutorial

About the author