Flutter Tutorial: Building An Expense Manager App – 1

In this tutorial series, we will be building an expense manager app In Flutter from scratch. If you have never developed any apps with Flutter, start here!

Introduction

This is the first part of our series “Building An Expense Manager App In Flutter“. The series is aimed towards introducing all the important concepts for building production ready Flutter applications.

If you have never developed any apps on Flutter before, this tutorial will help you get started and put you to speed. Even if you have already been working with Flutter for a while, you can learn about advanced topics in Flutter here.

Topics Covered By This Advanced Flutter Tutorial

• Essential Flutter widgets
• Styling widgets
• State management with Inhertied widgets
• Working with async data and stream builders
• Offline Database
• JSON serialization with built value
• BLoC pattern implementation
• etc. etc. and etc.

Prerequisites For Building First Flutter App

Before beginning this series, it is assumed that you are familiar with basic concepts of object oriented programming. All Flutter related prerequisites will be addressed on this series itself, either via describing them here or by providing links for further reading.

App For iOS Or Android

We can build apps for both iOS and Android with Flutter. However, to build iOS apps, you will need a mac computer. You can connect your phone directly or setup an emulator/simulator for testing the development.

In this series, we will assume you are on Android. But even if you are developing for iOS, the steps described here are pretty much same for both the platforms.

Expense Manager App Features

So what will we be building here?

We will build an app that will help us keep track of our expenses. We all know how important it is to keep those expenses in check right 😉

This is a list of features that we would like to have in our Flutter app.

Category Related

As a user I should be able to:

• Create new Expense Categories.
• Update Expense Categories.
• Delete Expense Categories.
• Set Icon for Category.

Expense Related

As a user I should be able to:

• Add expense under a category for selected date.
• Enter expenses for past dates.
• Edit created expenses.
• Delete expenses.

Reporting Related

As a user I should be able to:

• View total expenses for each category.
• View total expenses for a given date range.

Setup Your First Flutter App

Once you have Flutter installed on your machine, run the following command in the terminal.

flutter create expense_manager

The command creates a Flutter project directory called expense_manager that contains a simple demo app.

Enter into the project directory and run the application.

cd expense_manager
flutter run

The command launches Flutter app on your connected device.

Now, open the project folder in your favorite code editor and let’s start building the expense manager app with Flutter!

Start Development

In the lib\main.dart file, you will find the boiler plate code created by Flutter. Delete everything from this file and replace with:

void main(){}

The void main function is the main function from where a Dart application begins to execute. If you run the app right now, you will see nothing but a blank app. This is because we have not added any widgets here.

Widgets In Flutter

Similar to React and React Native applications, in Flutter everything is a widget. You place one widget inside another creating a hierarchy of widgets. They describe how the user interface view should look like.

Checkout Flutter v/s React Native

In Flutter, widgets can be Stateful or Stateless. A Stateful widget can rebuild it’s UI based on the state of data that it contains.

Let’s create a widget for our app.

import 'package:flutter/material.dart';

void main(){}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

The MyApp class extends from StatelessWidget so it must override the widget’s build method. Every widget receives a BuildContext in it’s build method which represents the context in which the widget is building.

With the help of BuildContext, a child widget can receive data of the parent widget without having to pass parameters around.

Ok, back to development.

Adding A MaterialApp Widget

Next, we will create another widget for the dashboard of the application. We will wrap that widget by a MaterialApp widget so that the app can inherit Material designs.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expense Manager"),
      ),
      body: Center(child: Text("Hi"))
    );
  }
}

We are using the default theme provided by Flutter for this application. Now that we have a dashboard page to work upon. Let’s add some UI components here.

So what will we have in the dashboard page? At the bare minimum, we would probably have following UI components in our Flutter app:

• List of expenses added for current day.
• A date picker to change selected date.
• An icon button to add new expense.
• Links to expense categories and view reports.

Designing Dashboard Page Of Expense Manager

For navigation from the dashboard screen, we will use a tab bar. So, let’s set it up.

Setup A Tab Controller

When working with tabs, we will basically have three things:

• Icons to represent tabbed pages – TabBar widget
• Controller to load tabbed pages – TabController widget
• Tabbed pages – TabBarView widget

To add a tab bar, let’s first convert the HomePage widget into a Stateful widget.

...
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
...

A tab controller requires a TickerProvider in it’s constructor for tab animation. For this, we will need to implement the SingleTickerProviderStateMixin mixin.

So, let’s make the changes required:

...
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  List<String> _tabs = ["Home", "Category", "Report"];

  @override void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: _tabs.length);
  }
...

We have initialized a tab controller. Next, let’s setup a simple tabbed page for the application.

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  List<String> _tabs = ["Home", "Category", "Report"];

  @override void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: _tabs.length);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expense Manager"),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.category)),
              Tab(icon: Icon(Icons.report)),
            ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(child: Text("Home", style: Theme.of(context).textTheme.display1,)),
          Center(child: Text("Category", style: Theme.of(context).textTheme.display1,)),
          Center(child: Text("Reports", style: Theme.of(context).textTheme.display1,))
        ],
      )
    );
  }
}

Wrapping Up Part 1 Of Tutorial

In this post, we have introduced the scope of our flutter tutorial. We identified what we will be building and also mentioned what you can expect from the end of this tutorial.

So far we have just created a basic tabbed page application. Let’s continue further development in the next articles.

Part 2