Supercharge your Flutter Apps for Android, iOS, and Web with Cloud Firestore Pt. 2 🔥
I. Introduction
Ever wonder how you can leverage the power of Cloud Firestore in your Flutter app? Please do visit the first article of this series for you to be able to set up the project that we will use.
Flutter Firestore Series 💙 🔥
- Part I — Firebase and Flutter Setup
- Part II — CRUD operations
- Part III — Firebase for Flutter Web (Coming soon!)
- Part IV — Dealing with complex queries (Coming soon!)
II. Reading documents from Firestore
a. Preparing the API
Let’s start by defining the methods used for retrieving data from Firestore.
Add the following to your FirestoreApi.
snapshots() method allows your app to listen to the latest document changes. If there are changes introduced in your database, Firestore will update the document snapshot and your StreamBuilder, respectively. This is useful for the parts of your app that need to change its state in realtime.
On the other hand, the method getDocuments(), which returns a Future, is used for retrieving documents once per method call. This can be alternatively used if you rarely need to update the data in your app.
In this project, we will use streamCollection() for retrieving our events in the database.
b. Updating the notifier
Next, we need to expose the methods in our API to our notifier. This is where we put most of the business logic in the code.
Add the following code to your events notifier.
c. Rendering the UI
Populate the event feeds by adding a StreamBuilder that will consume the document snapshots from your Firestore database.
StreamBuilder is a widget that rebuilds itself based on the latest update on the snapshot of interaction with a Stream. In our case, our StreamBuilder is connected to a Stream exposed from the events notifier.
Awesome! You should now be able to display the list of events stored in Firestore.
III. Creating a new document in Firestore
a. Preparing the API
Similar to how we started reading data from Firestore, we need to update our API class first.
Add this function to your FirestoreApi.
By default, Firestore can accept a Map object when adding, updating or deleting a document.
Although, we don’t really want to expose too much work on the UI, so we handle the mapping in the model using toJson() method.
b. Updating the notifier
Add the following code to your events notifier.
c. Populating the UI
Before we add any new code to our UI, let’s try to understand the Form setup first.
_eventFormKey provides access to the Form’s current state in the widget tree. For example, we can easily call the validator callbacks in our form by simply calling _eventFormKey.currentState.validate().
An example of a validator callback would be like this.
In the code shown above, the error message will show up if the field has no input.
In the code, _titleTextEditingController is responsible for managing the TextFormField widget of our event title. We can retrieve the input using _titleTextEditingController.text, anywhere in the class.
In the EventForm widget, add the following to the _submitForm() method.
IV. Updating and deleting documents in Firestore
a. Preparing the API
Given that we are now dealing with documents that are already in the database, we are required to pass an id parameter, specifying the document we want to update or delete.
Add the following functions to your FirestoreApi.
b. Updating the notifier
Add the following code to your events notifier.
c. Populating the UI
We will be reusing the same widget we used for adding a new document and identify its mode upon loading the screen.
This is how we open our form in EDIT mode from our event details screen using the EventFormScreenArgs class.
Next, we need to add the following code to show a delete confirmation prompt to the user.
(Optional) In our project, we will use the flutter_dialogs plugin to display the prompt.
Lastly, we need to add the following code to request document deletion.
Amazing! You have just created a Flutter app with Firestore CRUD operations.
Stay tuned for next article in this series — where we will discuss the use of Firestore for Flutter Web and start writing complex queries!
V. Resources
For Flutter trainers and organizers, I have written this in a codelab format — please check it out!
If this helped you, please don’t forget to ⭐ the repo. Thank you!
Let’s keep in touch
- Twitter: joshuamdeguzman
- Github: joshuadeguzman
