Flutter, keep track of your receipts on Firebase! (2nd part)

In my last small post, I have started to introduce Firebase and in particular Firebase storage to store my receipts.

Store area is a good storage location for object contain, but if you expect to maintain or retrieve them I propose to use Firestore database which allows us to store a collection of objects.

So to recap, Storage, will provide a means to store the photos as per below a snapshot.

While the Firestore database will collect the URL pointing out to it.

Setup

To begin, you’ll need a few plugins.

• Image Picker: This allows the user to select an image file from their device or take a new picture using their camera
• Firebase Storage: Allows the app to access the Cloud Storage for this Firebase project
• Cloud Firestore: This allows the app to use the Cloud Firestore API
• Firebase Core: Mandatory plugin for using Firebase products

The class

So if you read my previous post on that matter, I was referring to

onPressed: () => Navigator.pushNamed(context,router.UPLOAD_IMAGE_FIR_STORAGE

This is actually launching the build of the following widget: UploadingImageToFirebaseStorage()

See below the demo.

PickImage declaration

PickImage is basically offering you the possibility to open the camera when you decide to set the image source as above.

As soon as the Icons.add_a_photo is pressed, the camera function is open

So, either the _imagefile is null and the camera icon is displayed, or it is the image itself, and the widget is redrawn thanks to the setState() method in the pickImage().

Another widget is defined to handle the upload to firebase storage, it is seen above as uploadImageButton() that I am going to describe now.
Don’t pay attention to the getProgressDialog(), which is a fancy means I found to have this circular bar while the upload is ongoing.

Here we are, finally, we have the uploadImagetoFireBase(context) which uploads the image.

So, 3 steps:

1- retrieve the image thanks to the _imageFile.path property, I have actually embedded the image into a PDF, however, this is not required.

2- get the instance of firebase_storage, this is a singleton, and you need to read my previous article to understand it.
Thanks to it, it is really straightforward, you just need to put the file!
Retrieve the download URL.

3- add the details into a collection into the FirebaseFirestore instance, you do not need to create anything up-front, for example, the collection “images” will be created automatically if needed and set the properties accordingly.

await FirebaseFirestore.instance
.collection("images")
.doc("doc_$timestamp")
.set({
"url": downloadUrl,
"gsc": gcsReference,
"name": "$fileName _$timestamp.pdf",
"timestamp": "$timestamp",
"status": "pending"
})
.then((value) => print("Document added"))

So, we have an initial prototype to store our receipts into Google cloud storage, and we have a collection of data that are referencing them.

In the next chapter, I will discuss more the server-side, and introduce the java spring boot to process the receipts and process them using different kinds of ML offers by google.