Firebase Firestore CRUD | Flutter

Firebase is one of the most popular BaaS used in mobile development. It offers a variety of services for mobile development, one of which we will be discussing in this article — Firebase Firestore. Firestore allows you to upload and retrieve data with very short and simple commands.

I have built this Schedular app to demonstrate Firestore CRUD ( Create Read Update Delete) operations.

We start by creating a Firebase project. If you need help creating a project on Firebase, you can check out this documentation that will guide you through that.

Done? Great! Let’s add our requirements.

Requirements

Add the following packages to pubspec.yaml file:

firebase_core: ^1.19.2
cloud_firestore: ^3.3.0

Initialize

Next, we initialize Firebase in our project

Make your main function an async function and add these lines before the runApp() function:

WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);

WidgetsFlutterBinding.ensureInitialized() function is used to interact with the Flutter engine. It is called because Firebase.initializeApp() needs to call native code and WidgetsFlutterBinding acts as a platform channel to do that.

Now that we have initialized Firebase, we move on to performing CRUD operations on our Firestore database.

Schedular App DB structure:

Our Model Class:

Create / Write

A Collection only contains documents. A document can contain fields and other sub-collections.

Our database is made up of a single root collection named “appointments”, and documents representing individual appointments.

To write data, we are going to book an appointment from the user side using this function:

But we need to pass our document Id to our Appointment class before uploading it to Firestore, so how do we do that? Let’s redefine our bookSession function:

On line 5, Firestore creates a collection named “appointments” and adds the appointment as a document with an auto-generated document Id. If the collection already exists, it adds the document without duplicating the collection.

Read

To read data from Firestore, you typically use the get() method:

db.collection("appointments").doc("FpS9NDSdMD2GeE9GL3i2").get().then(
  (DocumentSnapshot doc) {
    final data = doc.data() as Map<String, dynamic>;
    // ...
  },
  onError: (e) => print("Error getting document: $e"),
);

Since we want to update our app UI in real-time, we will use a StreamBuilder. Getting data from Firestore using a Streambuilder is slightly different from reading using the get() method.

Take a look at how we receive real-time appointments from the user:

Our getAppointments Stream:

Update

To update data in Firestore, you use set() or update().

I have added an edit feature for users who might need to update their appointment details:

Using set(), we update the entire data in the document with the updated values.

However, if we want to update individual values, we use update() instead of set(), like so:

Delete

Firestore database allows you to delete documents, fields, and collections (although this is not recommended).

We created a delete option for situations where a user changes his mind and decides to delete his appointment. To delete an appointment we remove the document from the collection with this function:

We locate the document by passing the document id as a parameter in doc(). Then call delete().

To delete a field in a document, we use the syntax:

We delete a field using the FieldValue.delete() function then update the document using update().

That about covers our app’s features and Firestore CRUD operations. As always, I try to make the demo apps as simple as possible so we could focus on the topic. However, feel free to build on it by creating more pages or features that allow you to practice more with Firestore.

Leave a comment if you have any questions or suggestions!

Get the full source code here.

See you in the next part of the Firebase series.