Connect an app in Flutter to the Cloud Firestore database in Firebase

In this post, we are going to see how we can connect a Flutter application to the Firebase platform; specifically to one of the databases that this platform known as Cloud Firestore offers us for free.

About Cloud Firebase

Cloud Firebase is simply an asynchronous database that we can use for different purposes; the excellent thing about this is that the use of this database is linked to a service that will automatically update each time we send or there is a change in the database at the record level; It offers us a very flexible structure to create our databases.

Google Firebase Cloud is a cloud application development platform from Google that provides a wide range of services to help develop and scale mobile and web applications; this includes file hosting, real-time databases, user authentication, cloud storage, user analytics, and mobile notifications. It's especially useful for developers who work on team projects or who need to scale their app to handle a large number of user requests.

Firebase Cloud also offers tools for mobile notifications and advanced user analytics tools that can help you better understand user behavior in your app, helping you improve user experience and retention.

Create project on Firebase web

In this block we are going to see how we can create the initial configurations on the Firebase web; we have to go to the official website and create a project in Firebase:

Pagina de Firebase

https://firebase.google.com/

Firebase home page

Crear proyecto firebase paso 1
Crear proyecto firebase paso 2

Adapt project in Flutter (Android app)

android\app\build.gradle

    defaultConfig {
        applicationId "com.example2.crudflutter"
        ***
    }


Now we are going to return to the Flutter app and we are going to make the configurations at the project level; the same as the official documentation indicates.

We add the dependencies in the Cloud Firestore (pub)

https://pub.dev/packages/cloud_firestore

We add it in our pubspec.yaml:

void main() async {
  await Firebase.initializeApp();
  runApp(MyApp());
}

CRUD operations on Firestore Cloud using Flutter

FirebaseFirestore.instance
                        .collection("notas")
                        .add({
                      'title': titleController.text,
                      'content': contentController.text
                    });
Video thumbnail
StreamBuilder(
          stream: FirebaseFirestore.instance.collection("notas").snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                : CircularProgressIndicator(),
              );
            }
 
            List<DocumentSnapshot> docs = snapshot.data.docs;
 
            return Container(
              : ListView.builder(
                  : docs.length,
                  itemBuilder: (, i) {
                    Map<String, dynamic> data = docs[i].data()
                    print()
 
                    return ListTile(
                      : Text(['title']),
                    )
                  }),
            )
          },
        )
          FirebaseFirestore.instance
                        .collection("notas")
                        .doc('nuqIzxsdwu7Q7q1WCtYa')
                        .update({
                      'title': titleController.text,
                      'content': contentController.text
                    });
Video thumbnail

I agree to receive announcements of interest about this Blog.

We are going to configure a project in Flutter to the Cloud Firestore database in Firebase and learn the CRUD operations to this database.

- Andrés Cruz

En español