Adding Bookmark Feature Using Firebase Firestore in Flutter App
Whether it is an e-commerce app or a content viewing app or any other general app which deals with large lists of data, bookmarking or add to favorites is a much needed feature in such kind of apps. Today I will walk you though all the steps required to implement a bookmark feature in a flutter app using firebase firestore database.
Why using firebase firestore ?
One another method to do so is using shared preferences but the problem with that is it stores data locally and if a user deletes the app and reinstall it, the saved bookmarks will be lost. So, we will be storing data on firestore database and link it with the account of the user. Hence this way, bookmarks will not be lost and can be accessed by the user from multiple devices by logging in from the same account.
Prerequisites
Having a basic understanding of the Workflow of making Flutter Apps and knows basic operations of firebase firestore like fetching and adding data.
Resources
You can get any help regarding flutter setup from here.
In this article, to setup firebase authentication and firebase cloud firestore I have followed the FlutterFire documentations which can be found here :-
Let’s get started!
- Adding firebase to the project
First step is to connect firebase with the project. For that go to Firebase Console and set up firebase project by following the steps.
Then we have to add our flutter app in that firebase project.
Follow the instructions for linking firebase with our app and if you have some difficulty, you can refer to Add Firebase to your Android project.
2. Adding dependencies
Till now we have only linked our app with firebase, to actually work with firebase, we will be needing some packages.(versions might be different, you can get the latest package version from pub.dev)
firebase_auth: ^3.3.3
cloud_firestore: ^3.1.4
firebase_core: ^1.10.5As we know, to add packages in flutter we add them in pubspec.yaml file as follow :-
Note: Remember to take care of the indentation in pubspec.yaml file
3. Structure of the app
I made a very basic app just to demonstrate the functionality and how we can implement this bookmark or add to favorite feature.
It has three screens as follows:
As you must have observed, I have put zero efforts in UI design 😅, so kindly ignore that.
4. Structure of database
Before I explain the implementation, lets’ first look at the firebase firestore database I made with dummy data.
First I made collection with name items that contains five documents. Each document just have single field called “name” which has string values like “item 1", “item 2” and so on.
This is a just dummy data, in real this list could be something we fetched from an api or from a bigger database. Basically this is the list from which we want to bookmark some items.
Second collection I made is of all the users that have registered on the app. Each document represents a user and it has two fields, email and a map which tells which user has bookmarked which item with the help of Boolean.
5. Code and Implementation
The app starts with the login page and as we click on login, we search for that particular user in our users collection using email and then fetch the map named bookmarks from that document. Bookmarks map contains all the items with a boolean value associated with it which tells us if that particular item is bookmarked by that user or not.
This is the function that gets called during login and later we can access the data from bookmarks map.
If the user is not registered, then first we will have to make a new doc for that user and then proceed further. The code for that is below
Here first we mark all the items in the bookmarks map false (because new user don't have any item bookmarked) and then add it to users collection.
After logging in, we go to homepage where there is a bottom navigation bar that helps us navigate between all items and bookmarked items. First lets look at Allitems class which will display all the items.
Functions is a class where I wrote all the methods like getitems, getitemslogin, register, etc, which I mentioned above. So, first we will get the bookmarks map that we made before from the class Functions and then in the initsate of the class Allitems, I broke it into two list of keys and values so that I can use them easily in ListView builder which I used in the body.
There is also an icon button in list tile. With this we can add bookmark and remove bookmark of any item. It calls a method called update in class functions that updates the status of a particular item when clicked.
This update method works in three steps, first it fetches the current bookmark map of the user, then it updates the status of the item we want to bookmark or remove bookmark and at last it updates the status in the database.
And in this way we can add and remove bookmarks for a particular user. On navigating to bookmarks tab in Bottom Navigation Bar, we can see all the items that the user has bookmarked.
It is almost similar to the AllItems class, the only difference here is we only display those items whose boolean value is true i.e. the items that are bookmarked by the user.
About Me
I am Samarth Goel, second year student at IIIT, Allahabad, member of AppD wing, GeekHaven. I am a flutter enthusiast and always looking forward to learn new things.
You can contact me on LinkedIn.
Thank you for reading !!!
