PeterUsing Firebase Firestore for a Flutter application is an excellent choice - but it bears some challenges. In this post we introduce some best practices to help you ship your flutter app.
Preface
In the previous posts of this series, we outlined an architecture that makes using Firestore in Flutter reliable and extensible. In what follows, we will build on top of the introduced mini-framework and add support for write operations - for persisting Dart objects to Google Cloud Firestore.
The feature that we will implement will make it possible for the user to modify the app's theme colour. The user's preference will be persisted into Firestore.
Feel free to follow the post by checking out the full source code of the app in our GitHub repository.
Support writing user preferences to the cloud
Creating a new model
To allow users to set the color of the app, we can create a UserPreference model class, as follows:
The DateTime field will be used to sort the saved UserPreference objects by creation date, to make sure that always the most recent object's content will be used by the app. This is a work-around that can be used, if your application does not have an update functionality implemented yet.
MapConverter implementations and a FirestoreUserPreferenceMapConverter have been also created, the same way as it was discussed in the second part of this series. The exact source code for these can be found on GitHub.
Extending the DAO
Currently, our DAO only supports reading documents from Firestore. We can extend it with a write functionality by adding a new method signature to our FirestoreDao abstract base class:
Of course, we still need to implement this abstract method. Our implementation of the FirestoreUserPreferenceDao looks like the following:
Having modified the signature of the abstract DAO and having the concrete implementation ready, we can test the newly implemented feature by slightly modifying the UI.
Creating the UI to set the user's preferred color
We are creating a basic UI component to let the user pick a color. A MaterialPicker widget is composed into an AlertDialog by using the flutter_colorpicker library. Whenever the _onColorChanged method is triggered on a new color's selection, we call FirestoreDao.of<UserPreference>().write to write the new preferences to Firestore.
It is apparent, that it would be a more optimal solution to create a UserPreference object once, then update this existing object. The scope of this post does not let us to introduce the update functionality too, but it can be implemented in a very similar fashion as the write functionality was.
As the finishing touch, we need to use a StreamBuilder in the top of the widget-tree to make sure that the UI reacts to the change of the underlying data, whenever _onColorChanged is invoked:
Wrapping it up
In this post we have shown how it is possible to build on top of the existing DAO architecture to enrich the functionalities of the database layer and to benefit more from the capabilities of Google Cloud Firestore.