Flutter, keep track of your receipts on Firebase!
(Part 1)
(Part 2 available here)
As an independent, I quickly noticed that keeping track of my receipts (restaurant, coffee, etc.) was a bit annoyed.
Meanwhile, I was a bit curious to develop an application for the first time on a smartphone using a cross mobile language, indeed I am 50 years old, and even if I have developed in my previous experiences, I am more focusing on my soft skills today.
Nonetheless, I have decided to investigate which language could probably help me to tackle that new area, and I have discovered Flutter.
Flutter uses Dart language, which has a coding style that is relatively close to my previous experience (I used to code in Java) and relatively simple.
Another aspect that I wanted to tackle, was Google cloud platform, and what could offer their APIs.
I have therefore decided to initiate a small prototype, through a learning curve, and this is what I could relatively quickly put in place using some fancy features around Google cloud.
First the big picture:
1-A small flutter application, which takes photos, and stores them in Firebase
2-A sprint boot web server which reads documents and processes them via a Google Cloud Vision for Text recognition.
As I did not want to have “locally” a server up and running connected to the internet, I have instead deployed my backend application into Google App Engine.
I have used the standard model, which is well and briefly explain here: https://cloud.google.com/appengine/docs/the-appengine-environments
I will come back with a new article on what I have done for the backend application, indeed this will be a series of several posts to keep it short.
Flutter application
Once a photo or a receipt has been taken, we need to store it, since I want to learn some new stuff, I have decided to store them in Firebase.
Firebase project
Now, we will create a Firebase project and integrate that project with our application. Please refer to this link to do so.
Connecting Firebase Storage:
To connect this storage is to add a specific line to your project/android/app/build.gradle:
apply plugin: ‘com.google.gms.google-services’, at the end of the file
Also, pay attention, since you are requesting google services, you will need to add your google-services.json into the Android application folder as below.
This is downloaded from the firebase as soon as you create a new application
It is also possible to customize your application, in the same file update the applicationId.
You will also need to set the minSdkVersion up to 21!
Another one is also required and need to be updated (Please note the file is at a different location).
project/android/build.gradle:’com.google.gms:google-services:4.3.2'
You could get some insight details here: https://firebase.flutter.dev/docs/installation/android
When you create a flutter project using a code editor, the environment will also create a ‘pubspec.yaml’ file.
We will, later on, increase the number of packages, but currently, I will only present the building block for our POC.
Now we will start with a router, this is relatively a comprehensive way to manage the different pages that we will build in our application
This method is convenient to route the pages using a name, of course at the starting up of the application we will start at the HOME screen.
As per Java, the engine needs an entry point that will start up the application.
This entry point is a function from an initial script main.dart.
Note the onGenerateRoute: router.generateRoute, initialRoute: router.HOME
statement, it is using the router function to drive the path to the initial page HOME.
Firebase needs to be initialized for the first time, and this is the most convenient way I have found.
The Firebase singleton has an initializeApp, and this way it will be done for the whole application.
You will also notice the usage of a FutureBuilder, this is to manage the nature of the asynchronous processing, you can have a look at this quick video to understand the principle.
This way permits displaying of a SplashScreen, while the Firebase connection state is establishing.
Let’s go at home!
The home screen is mainly composed of two parts, the first part represent the floatingActionButton, which is provided by the package https://pub.dev/packages/fab_circular_menu
The second part is a Listview which displays the document stored in the Firebase storage location.
You can see the simulation below:
In my next article, I will go further in the action to take a photo and upload it into Firestore!
onPressed: () => Navigator.pushNamed(context,router.UPLOAD_IMAGE_FIR_STORAGE
You already have noticed the line of code above ;-)
You can check out the complete code at my github repo
