Flutter App with Firebase Cloud Firestore

5 min readAug 12, 2021

Save data to cloud Firestore from your Application after registration

Setup and save data to Cloud Firestore

Before getting started with cloud firestore, you should have your application setup with flutter and if you like add login and registration to your app. Follow this simple tutorial to setup your application with firebase and add login and registration for your app.

Let’s get started

After creating a database, select the test mode if you working on a personal project(learning) and production if working on a client product. For this case, i will select the test mode. Click next button.

Set your location. NB. You won’t be able to change the location later. I will go with the default for now. Click enable.

Wait for the cloud Firestore to load, you will then see the cloud Firestore dashboard below.

Another important part in cloud Firestore is the security rules.

Security rules enables you to focus on building a great user experience without having to manage infrastructure or write server-side authentication and authorization code. It provide access control and data validation in a simple yet expressive format

Writing rules

allow expressions, which control access to those documents:

match statements, which identify documents in your database.

service cloud.firestore {
  match /databases/{database}/documents {
    match /<some_path>/ {
      allow read, write: if <some_condition>;
    }
  }
}

Edit your rules as below. Allow read/write access on all documents to any user signed in to the application. There are more rules you can use for your application here is a link for other options you may prefer.


service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

N.B While these rules are valid, they are not recommended for production applications:

Congratulations, you have finished the first step of setting up cloud Firestore.

A small introduction into cloud Firestore.

Firestore is a NoSQL document database built for automatic scaling, high performance, and ease of application development. It differs from other traditional databases in the way it describes relationships between data objects.

Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps — at global scale. It ships with mobile and web SDKs and a comprehensive set of security rules so you can access your database without needing to stand up your own server.Unlike a SQL database, there are no tables or rows. Instead, you store data in documents,

A document is a lightweight record that contains fields, which map to values. Each document is identified by a name. All documents must be stored in collections.each document contains a set of key-value pairs, which are organized into collections.Document format

# key   : "value"
 first : "Mercy"
 last : "Jemosop"
 born : 1815

Install cloud Firestore

On your pubspec.yaml, add a cloud Firestore dependency. Follow this link for the latest version. Run flutter pub get after to download.

# add dependency
dependencies:
  cloud_firestore: ^2.4.0#download dependency
$ flutter pub get#Rebuild your app
$ flutter run

Learn how to add data to Firestore with a todo-list App.

This is basically what we will add to our form. We create a collection (todo) give it any name you like and add the items to Firebase cloud store.

final _fireStore = FirebaseFirestore.instance;_fireStore.collection('todo').add({
  'day': day,
  'task': task,
  'place': place,
  'time': time,
});

We will create a form with four fields:

Yeeeey!!! It is as easy as that.

Fetch data from Cloud Firestore

To fetch data we are going to utilize the streamBuilder class which is a widget that builds itself based on the latest snapshot of interaction with a Stream.Stream is a source of asynchronous data events.

The stream class will be fetching data from the database without the user having to restart the app for latest additions .

We will display the data in a Listview. At the moment the design is not that nice hope you will work on improving the design after you are able to fetch all the data.

Add a button in the todo class for navigating to the todo list.

Padding(
   padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
   elevation: 5.0,
   color: Colors.lightBlueAccent,
   borderRadius: BorderRadius.circular(30.0),
child: MaterialButton(
   minWidth: 200.0,
   height: 42.0,
child: Text(
   'Todo_List',
   style: TextStyle(color: Colors.white),
),
onPressed: () async {
  Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => TodoList()),
);},),),)

This line below retrieves all documents we added to the database and we used a for-loop to get a single item in the database.

final todoLists = snapshot.data!.docs;

Order your todo list based on time created. The created field is a field containing the date and time a document was created. You can play around with it to fit your requirement

stream: _fireStore.collection('todo').orderBy('created', descending: false).snapshots(),

Yeeey, Hope you have learned how to add data to Cloud Firestore and retrieve data from Cloud Firestore.

Happy Coding.