Connect your Flutter App to Firebase

In this post, I will be showing practical steps to connect a flutter app to firebase. I will keep the example at reading and writing data to/fro cloud firestore database. Our demo app is a simple note-taking app that stores notes on firebase.

For the record, firebase is a backend solution developed and maintained by the good folks at Google. It provides app developers with remote database and other cool functions that can help developers turn ideas into apps fast.

air-note app screenshot

Getting started

At this point, you already have a flutter project setup, and the next thing is to create a new firebase project or add your app to an existing firebase project from the firebase console (https://console.firebase.google.com/). In this post, I won’t be diving deep in the firebase console part of the task but here is a link to the official documentation: https://firebase.google.com/docs/flutter/setup?platform=android and https://firebase.google.com/docs/flutter/setup?platform=ios (for iOS side of things).

To use firebase auth, you will need to get SHA1 key for your app and add it on firebase console, here is a link to a very helpful guide on how get the key: https://stackoverflow.com/a/54342861/3475551.

Don’t forget to create a cloud firestore database for your app when you are done adding the app on firebase console if you intend to use firestore.

Now to the main business!

Configuration

If you are building an app that uses only cloud firestore like our example app adding only cloud_firestore dependency to your pubsec.yaml file should be enough.

The dependency section of your pubsec should look close to something like this:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  cloud_firestore: ^0.12.9+1

pubsec.yaml is located on the root directory of your flutter project.

On the Android side (Open android/gradle.properties file) add the following lines:

android.enableJetifier=true
android.useAndroidX=true

Optional: you can also set multiDexEnabled true in android/app/build.gradle (set the value under defaultConfig section) for example:

defaultConfig {
    multiDexEnabled true
}

We are ready to start coding our app.

Writing + Reading data to/from Firebase

The cloud_firestore dependency added earlier in pubsec provides functionalities for saving/reading data to/from Firebase. See official flutterfire example repo.

All the logic for our example Note-taking app can be found in the main.dart file. Here is the content of the file:

Save New Note

Our app displays a dialog that users can use to save new notes. _addNoteDialog method opens this dialog and onTap for the Save button sends new note to firebase. You can find the code below:

FlatButton(
  child: Text("SAVE"),
  onPressed: () {
    notes.add(<String, dynamic> {
      'body': noteText,
      'id': "1"
    });
    Navigator.of(context).pop();
  },
)

Read Notes

We read all notes from firebase and display in a ListView (without any special sorting). _buildList method prepares our list while _buildListItem contains the design for each list item. We are simply displaying each note on a Card. Below is the code that reads our notes:

return StreamBuilder<QuerySnapshot> (
  stream: notes.snapshots(),
  builder: (context, snapshot) {
    if(!snapshot.hasData) return LinearProgressIndicator();
    
    return _buildList(context, snapshot.data.documents);
  },
);

Collection reference

It might be worth pointing out that we are reading and writing to a “notes” collection for our example app and the following variable holds a reference to that collection:

CollectionReference get notes => Firestore.instance.collection('notes');

Conclusion

We have walked through building a simple app that connects to firebase. You so much more you can do with firebase. Things like authentication. For this post, we have kept it at adding firebase to a flutter add and using cloud firestore. Code for the example can be found on this repo: https://github.com/buildbro/air_note.

Happy coding and I hope this helps someone.