Flutter Tutorial: Building An Expense Manager App – 3

This is the third 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 static list of expense categories. We also setup an OfflineDbProvider for SQLite database engine and a service implementation for expense category.

In this post, we will re-factor our classes to make things cleaner. We will then add a screen to create a new category.

Re-factoring Classes

So far we have been writing all of our code in the main.dart file. Not a clean approach right? Let’s move the classes to separate files.

Inside the lib folder create a folder “screens“. This folder will contain all the routes that we will create.

Move Out HomePage

Add a new file “home_page.dart” and move the content of HomePage and _HomePageState classes from main.dart file to this file. Your main.dart file should look clean like this:

Move Out Category

Now create another file “category.dart” inside the screens folder. Move the content for Category widget from home_page.dart to this file creating a Stateful Category widget . At the end, your HomePage should look like this:

And the Category widget:

Create New Category

Now that we have organized our code a little, let’s start development again. Add a button to create a new category.

We have updated the _getCategoryTab so that it now contains a button which is wrapped alongside the ListView in a Column.

The ListView is wrapped inside the Expanded widget so that it can take up the remaining space in the column.

The “Add New” button should redirect to create category page. To create this page, add a new folder “routes” inside the lib folder and add a file “add_category.dart“.

Become A Flutter Expert With This Course

The AddCategory widget has a basic layout for now. We will make more changes here as we go along. But first, add a navigation to this page from Category screen.

In Flutter, there are many options for using navigation and routing. You can learn more about navigation in our Introduction To Navigation And Routing.

Create An Icon Picker In Flutter

In Flutter, an icon is created out of IconData. Since we want users to be able to set icons for each category label, we need to create a list of icons to pick from. A user can select icons from the list and assign it to the category.

Here, we have created a list of random icons to work with. The icons will be shown in a GridView which can arrange the icons in a tile. Since, we want the users to be able to select icon, we have used IconButton.

Add _showIconGrid inside the column:

Add Category 1
Add Category 1

Wrapping Up

In this part of our Flutter tutorial series, we didn’t do a whole lot. We organized the classes to separate files and folders. Then we created a “Add New Category” screen.

Now in the next part we shall look into making this page functional.

About the author