Firestore Database — Flutter💙💛
We can’t have all our data stored locally in our app. We will always need a way to store data online and fetch it on user requirements. Firestore Database can be one of the most suited No-SQL Database for your app💛
Storing data into an online database and fetching them on user requests is one of the most common features in the app. You either will need to write your own backend or you can use the most popular Firebase service — Firestore Database!
To integrate Firestore into your application, there are a few steps to follow:
- Enable Firestore Database from the console.
- Write code to add data and fetch data from Firestore Database.
- Write code to show fetched data on UI.
So, let’s get started!
Step 1: Enable Firestore Database from the console
Go to the Firebase Console and on the left panel click on Firestore Database. You will see the welcome screen of Firestore Database with a button called
Create Database. You can click on that button to start. You will get a popup to start in Production Mode or Test Mode, you can choose any based on your requirements.
Once you create the database, you will get the screen as follows:
There are 2 main components of the Firestore Database:
- Document: A document can be considered as the tables that we have in SQL. It is the unit of record that stores values in the key-value form.
- Collection: A collection can be considered a container of documents. In other words, collection can be considered as the database we have in SQL and documents as the tables inside the database.
Step 2: Write code to add data and fetch data from Firestore Database.
Now, we are going to store basic user information in our database. You can read the article for Firebase Authentication in which we designed our login and register pages. In this example, we will re-design the register page to get the Name and Age of the user during registration. Let’s first write the backend code to add data to firestore and fetch data from it.
First, add the
cloud_firestore package into your pubspec.yaml file. Now, create a new file called
database_service.dart which will contain our logic for adding and fetching data from Firestore Database.
Here’s how you can write and read data with Firestore.
So, in the method
addUser , we first created the instance of collection that we want. If the collection doesn’t exist, Firebase will create one. Now, if you want to have the document id as a custom name (here user email id), we use
users.doc(email).set. If you want a unique random automatic generated id, you can use
users.add directly and it will generate a doc with a unique id for you.
getUser method, we first create the instance of users collection and then fetch the document from the collection. Once we get the document, we then fetch the data that we have inside the document and store it in the form of
Map<String,dynamic> so that we can later access the fields in form of key-value pair.
Step 3: Write code to show fetched data on UI
Now, first, we need to add 2 more TextFields on our registration page and add a call to
addUsers method. So your create account page code can look like this:
Here, first, we called the registration method of auth_service and if that’s successful, we call the addUsers method of database_service. If that is also successful, we navigate to the home page.
Now, let’s display the name on the home page. So your home page should look like the following:
Here, we have added a new function called getData() which just fetches the name by calling
getUser method of DatabaseService. We have also added email inside the constructor of
Home so that we can pass it from login and create account screens.
You can try out the example from GitHub Repository!
Hope you enjoyed this article!
If you loved it, you can Buy Me A Coffee!
Don’t stop, until you are breathing!💙
- Abhishek Doshi