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 -

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 -

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 -

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

• 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

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!

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