DEV Community: Tom Cohen

(Flutter) CRUD operations with Firestore database.

Tom Cohen — Sat, 12 Nov 2022 16:03:51 +0000

Introduction

While building my app I found 100 ways to call data from the firestorm database, especially that there's still some outdated information in the internet.
In this post I hope to give the clearest way to achieve all the crud operations especial the READ which for me took many tries until I got it right.

I'm assume already you set up the firebase and familiar with Flutter's syntax.

Setup the model
First I suggest you create the collection and a "demo" document inside Firestone just to grasp how the model we'll create after will look.

like you can see iv created the collection animals and inside there are a couple of fields. One particularly field is the "id" field, personally I like to create each document with the uniq id firebase automatically generates for it, this helps to avoid clashing. I create the field "id" so accessing the id would be easy, there are other ways to access it by calling the document id in the database but we'll not go over that in here. there are times that giving other types of id are preferable, for example when I create a "users" collection I prefer to keep the id's as their emails, this helps searching for the users especially if you group them later on in other collections.

Back to our collection "animals", now that I know what I what the object in my database to look like I'll create the model in flutter.

for that well create a new file animals_model.dart.
Inside well create a class for animals and list the requirements to create an "animals" object:

class Animal {
  String id; //id of the document inside firestore's db
  String name; // name of the animal
  int nubmer_of_legs; // nubmer of legs the animals has
  DateTime creation_date; // when the document was added tot he db

  Animal ({
    this.id = '',
    required this.name,
    required this.nubmer_of_legs,
    required this.creation_date,
  });}

This class will hold a model for object. the model will define all the necessary data that would be saved into Firestore.
So now we can already create an object of type "animals" but we need to add it to the database. for this will make the createAnimalDoc method, but before that we need to be-able to convert the object data to json and back from json.

  Map<String, dynamic> toJson() => {
        'id': id,
        'name': name,
        'nubmer_of_legs': nubmer_of_legs,
        'creation_date': creation_date,
      };

  static Animal fromJson(Map<String, dynamic> json) => Animal(
        id: json['id'],
        name: json['name'],
        nubmer_of_legs: json['nubmer_of_legs'],
        creation_date: (json['creation_date'] as Timestamp).toDate(), // import 'package:cloud_firestore/cloud_firestore.dart';
      );

the toJson() takes the animal object data and puts it into json format so Firestone can understand, the fromJson maps all the fields and gets the data and places it into the model builder variable so we can access it in our code.

CREATE
after all this setup we can finally start the CRUD operations and well start with create.
to create a new document into firebase we simply create the method createAnimalDoc like the following:

  Future createAnimalDoc(String name, int nubmer_of_legs, DateTime creation_date) async {
    final newDocAnimal = FirebaseFirestore.instance.collection('groups').doc();
    final animal = Animal(
        name: name,
        id: newDocAnimal.id,
        nubmer_of_legs: nubmer_of_legs,
        creation_date: creation_date);
    await newDocAnimal.set(animal.toJson());
  }

In here we put all the variables into the function but if you use controllers you can also list them here if you used a form of some sort.
if i were to create a new document with a specific id would enter it inside the ...doc('ENTER ID');

READ
In my opinion read is the most versatile of the crud operations with flutter+firestore. this is because of all the different data you might request from the database. You obviously don't won't to call all the data you have but only whats relevant to your use case. ill list a few examples and how to solve/approach them in your code.
before we start there's one thing to remember, to display that data into the page in flutter you must use the widgets FutureBuilder() or StreamBuilder(). Essentially you need to request the data and wait for in to arrive, those widgets are what can do that while giving you the ability to check if the data exists, or if there's an error or if it arrived and what to do with it.
the difference between FutureBuilder() and StreamBuilder() is that FutureBuilder() requests snapshot of the data once when the widget is called, waits for it and then displays it. the problem with it is if the data were to change it wont know it until it is called again (if you refresh the page or whatever). StreamBuilder() on the other hand requests a stream and continuously pips information to the page. so if the data changes in the database it will update inside the page too.
What to use is judged by what you need. if one snapshot is enough and you dont expect the information to change then use FutureBuilder() as its lighter on the app and makes less calls to the database. if the information need to be updated real-time then StreamBuilder() is your guy.

lets see how to use is in our code, in this example ill use a StreamBuidler():
first ill create an empty page

import 'package:flutter/material.dart';

class AnimalsPage extends StatefulWidget {
  const AnimalsPage({super.key});

  @override
  State<AnimalsPage> createState() => _AnimalsPageState();
}

class _AnimalsPageState extends State<AnimalsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
    );
  }
}

now ill wrtie the call method that makes the 'pipe' to firestore:

    Stream<List<Animal>> fetchAnimals() {
    return FirebaseFirestore.instance
        .collection('animals')
        .snapshots()
        .map((snapshot) => snapshot.docs
            .map((doc) => Animal.fromJson(doc.data()))
            .toList());
  }

now ill set up StreamBuilder()

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: StreamBuilder<List<Animal>>(
          stream: fetchAnimals(), // feed our stream to the stream builder
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final animals = snapshot.data!;
              return ListView.builder(
                itemCount: animals.length,
                itemBuilder: (context, index) {
                  return animalTile(animals[index]);
                }
                );
            } else if (snapshot.hasError) {
              return Text('Something went wrong!');
            } else {
              return Text('Something went wrong!');
            }
          },
        ),
      ),
    );
  }

as you can see if check if the snapshot's data exists, this is impotent for debugging.
and lastly we need to build the tile that will display the information. i like to do it with a separate widget in the same file:

Widget animalTile(Animal animal) => ListTile(
        title: Container(
          height: 50,
          width: 50,
          child: Text(animal.name),
        ),
      );

now we can request any information from the database regarding the collection animals.

Ok so how do we do it with a futureBuilder()? same way essentially:

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: FutureBuilder<List<Animal>>(
          future: fetchAnimals(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final animals = snapshot.data!;
              return ListView.builder(
                  itemCount: animals.length,
                  itemBuilder: (context, index) {
                    return animalTile(animals[index]);
                  });
            } else if (snapshot.hasError) {
              return Text('Something went wrong!');
            } else {
              return Text('Something went wrong!');
            }
          },
        ),
      ),
    );
  }

  Future<List<Animal>> fetchAnimals() async {
    var collectionSnapshot =
        await FirebaseFirestore.instance.collection('animals').get();

    return collectionSnapshot.docs.map((doc) => Animal.fromJson(doc.data())).toList();
  }

the method fetchAnimals() needs to be asynchronous to wait for the snapshot to arrive from the database.

SPECIAL CASES:

when you want to get specific document from the whole collection you can call .collection.doc(DOCUMENT_ID)
if you want to search for documents that have a specific field you can use the .where() to achieve this, more information in the official documentaion.

Update
This one is pretty simple, you get in the instance of the document and then just call .update()
example:

FirebaseFirestore.instance.collection('animals').doc('DOC_ID').update({ 'FIELD1': 'NEW_DATA', 'FIELD2': 'NEW_DATA', });

Delete
Same with the update, you get in the instance of the document and then just call .delete()
example:
FirebaseFirestore.instance.collection('animals').doc('DOC_ID').delete();

hopefully this give more current up to date information about the subject, keep in mind there are other ways to approach the CRUD functions with firestore this is just my way of doing it.

-T

(Flutter) Send POST request for FCM notifications

Tom Cohen — Tue, 25 Oct 2022 14:59:05 +0000

My ultimate goal for my project was to send push notifications for users though the client app. Ill be showing you my learning processes from the start all to how I learned to solve this problem.

First lets lay out the problem: my mission is to send push notifications to specific users through the client app when a user pushes a button in his screen.
The framework im using is Flutter and Firebase in the backend. Firebase is set up and Firebase cloud messaging can be set up easily from the following guide by Harsivo Edu
I'm referencing an introduction video to FCM from Fireship if you are not familiar with the feature.

After FCM is set up make sure to enable Cloud Messaging API (Legacy) in the project settings -> cloud massaging.

Once that is set up well we can test if everything works in Postman
go to the website and make a new POST request, then go to the headers section and set everything up like the picture bellow

In the POST request enter the following "https://fcm.googleapis.com/fcm/send" which is the REST API HTTP call to FCM.

In the "Authorization" VALUE enter the server key from under the Cloud Messaging API (Legacy) as shown in the red rectangle:

Now lets click the body section and write our request in JSON format:

inside the "to" we want to reference the device id we'll be sending the notification to.
we can find the device token id with the code bellow:

  Future<String?> saveDeviceToken() async {
    String? deviceToken = '@';

    try {
      deviceToken = await FirebaseMessaging.instance.getToken();
    } catch (e) {
      print('could not get token');
      print(e.toString());
    }
    if (deviceToken != null) {
      print("--------------Device Token--------------" + deviceToken);
    }
    return deviceToken;
  }

then call the saveDeviceToken() in then initState, or through a button or any other way.
hot restart the app then well get the device token id inside the debug console in VSCode. that token is what we paste the "to" parameter. which will reference this device only.

finally we click Send and wait, after couple of seconds we sould see the following:

"failure": 0 means the request worked and there werent any issues. if an emulator is running you should get a notification too

if id didn't work for you then make sure you set up FCM correctly.

OK! so we've done all that and now we want to send it though the client (through the app).
The following stackoverflow posts helped me to understand how to do it:
Post 1
Post 2
Post 3

for my purposes i found this answer in post 3 by user Stephan Schlecht, so i made a new class in a new widget i called postNotifications.dart and copied the code bellow

import 'dart:async';
import 'dart:convert' show Encoding, json;
import 'package:http/http.dart' as http;

class PostCall {
  final postUrl = 'https://fcm.googleapis.com/fcm/send';

  final data = {
    "notification": {"body": "this is a body", "title": "this is a title"},
    "priority": "high",
    "data": {
      "click_action": "FLUTTER_NOTIFICATION_CLICK",
      "id": "1",
      "status": "done"
    },
    "to": "<DEVICE TOKEN ID>"
  };

  Future<bool> makeCall() async {
    final headers = {
      'content-type': 'application/json',
      'Authorization': 'key=<FCM SERVER KEY>'
    };

    final response = await http.post(Uri.parse(postUrl),
        body: json.encode(data),
        encoding: Encoding.getByName('utf-8'),
        headers: headers);

    if (response.statusCode == 200) {
      // on success do sth
      return true;
    } else {
      // on failure do sth
      return false;
    }
  }
}

Enter the and the . then i called the function makeCall() with a button and it all worked out!

now this is the end of the guide for now. next my objective is to sent the notification to other devices that fit a certain criteria.
the FCM documentetion has all the parameter you can enter inside the JSON and their usage.

Thank you for following to the end of the guide.

-T