Build a Budget App using Flutter and Appwrite
Tags: appwrite, flutter, mobileapp
Published: 2021-11-02 02:21:12

# Overview
There are multiple components to think about when you are building an App.

The broad component can be categorised as - 
1.) The code for app: How data is consumed, displaying the components.
2.) The backend: Where the data is stored, api implementations

For 1, we have multiple solutions like react, ionic, flutter, Android sdk etc.

For 2, there are a lot of things to consider, how you handle authentication / authorisation, which database are you using etc. To make things simpler, there are frameworks like firebase and appwrite. 

In this blog we will learn about **Flutter** for building the app and **Appwrite** for its backend. Both Flutter and Appwrite are open-source projects and you can find them at -
Appwrite - https://github.com/appwrite/appwrite
Flutter - https://github.com/flutter/flutter

The best method to learn any new technology is to build something using it!

So, in this blog we will make an app using flutter and appwrite.

We will create a simple **budget management** app which can do following things -
- Allow authentication for multiple user, thus different users can manage their budgets
- Show current balance and option to add expense / income
- Show the historical transactions done by the user

Alright, with these requirements in mind, we are ready to start building!!

_pre-requisites_ - A little knowledge of flutter would be helpful but I will point to different resources as and when needed.

# Building the Budget App

You can find the final version of app in the repository - https://github.com/1995YogeshSharma/budget-app

## Step 1: Dev Environment Setup
Setting up both flutter and appwrite for local development is very easy. Appwrite comes as dockerized container and is very easy to use.
- Instruction to setup flutter - https://flutter.dev/docs/get-started/install
- Instruction to setup appwrite - https://github.com/appwrite/appwrite#installation

I am using **VS Code** as IDE but you can choose your preferred IDE.

## Step 2: Build the layout using Flutter

In this section, we build the layout of our app and use mock data. 

### 2.1 Create a blank project

Run the following command to create a blank flutter project
```
flutter create budget-app
```

Strip down the code in `lib/main.dart` to just have the outline code -
```
import 'package:flutter/material.dart';

void main() {
  // runApp(BudgetApp());
  runApp(new MaterialApp(
    home: new BudgetApp(),
  ));
}

// Our main widget
class BudgetApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<BudgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Budget App'),
      ),
      body: Container(
        child: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
```

When you run the app, it should look like -
![Step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22v57iv0123ro1ru2nj7.png)

### 2.2 Build the layout
You can find the updated code at - https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step3_lib/main.dart

On compiling the app should look like - 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qq5od4g79jza3w51joq.png)

### 2.3 Add the functionality
Now, let's add the functionality to add expense / income and show the transaction history. We also add the bottom sheet view for the login / signup.

You can find the updated code at -
https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step3_lib/main.dart

On compiling the app should look like -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mms9vg96fga14kzxgc9.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d62icsnndm48niigvlw9.png)

## Step 3: Add the Appwrite authentication and database

### 3.1: Add flutter project to Appwrite
Follow the instructions at https://appwrite.io/docs/getting-started-for-flutter to setup your app connections with Appwrite.

### 3.2: Create required collections in Appwrite
We will need two collections for the functionality 
- balances : This collection will be used to store the current balance for each user. The Document has 'email' and 'balance'

Click on the left bar options in Appwrite UI to create your collection with following settings
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gxgpfnmbs8sruuq63g6.png)

- transactions : This collection will be used to store transactional history for a user. Each document will have 'email' filed and 'transactions' which is an array of transactions
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw7xpn6izki290dr6id3.png)

### 3.3: Add appwrite authentication to the app
We need to create 'login', 'logout' and 'signup' functions in our appwrite client code and use them in the main file

Code for appwrite client - https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step6_lib/appwrite_client.dart

Updated main file code - 
https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step6_lib/main.dart

We should be able to login and signup in our app now!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlnedo9j9u44hwb9xylj.png)

### 3.4: Add appwrite database connections 
For transactions, we need to create a model which will be used to store the Transaction object and convert it to JSON to store it to appwrite database and back to object when fetched from appwrite

The updated code is present at - https://github.com/1995YogeshSharma/budget-app/tree/main/budget_app/lib

We have built our app now!

**The final App**
![App gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vu806xshoyeh1i3rc1k.gif)