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.

Inside the 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.

Output:

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 forget to connect with me on:

Don’t stop, until you are breathing!💙
- Abhishek Doshi

--

--

--

Experts on various Google products talking tech.

Recommended from Medium

Coding Terms | SEPARATION OF CONCERN SOC

Monitoring Network Bandwidth Usage in the Doubtnut app.

A simple example of using Spark in OCI Dataflow with Python - PySpark

How Fleet Managers Can Reduce Vehicle Maintenance Cost

How GitOps Raises the Stakes for Application Security

KWoC Project report

kwoc poster

Installing Solana on an m1 mac — notes for

Using the Devise Gem to Handle Authentication in a Rails App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Doshi

Abhishek Doshi

Google Developer Expert — Dart, Flutter & Firebase 💙💛

More from Medium

Firebase Storage — Flutter 💙💛

Before start with Flutter — Flutter Programming — Part 1

Flutter Journey….

Flutter : Widget and its lifecycle