Why Cloud Firestore?

The FlutterFire tech stack, consisting of Flutter and Firebase (and specifically Cloud Firestore), unlock unprecedented development velocity as you build and launch your app. In this article, you’ll explore a robust integration between these two technologies with a focus on testing and using clean architectural patterns. However, instead of jumping straight to the final implementation, you’ll build your way there, one step at a time, so the reasoning behind each step is clear.

What you’ll build

To demonstrate a clean way to implement Cloud Firestore as your app’s backend, you’ll build a modified version of the classic Flutter counter app. The only difference is that the timestamp of each click is stored in Cloud Firestore, and the count displayed is derived from the number of persisted timestamps. You’ll use Provider and ChangeNotifier to keep the dependencies and state management code clean, and you’ll update the generated test to keep the code correct!

Before you get started

This article assumes that you have watched and followed the steps in this tutorial to integrate your app with Firebase. To recap:

1. Create a new Flutter project, and call it firebasecounter.
2. Create a Firebase app in the Firebase console.
3. Link your app to iOS and/or Android, depending on your development environment and target audience.

Note: If you configure your app to work on an Android client, make sure that you _create a _debug.keystore_ file_ before generating your SHA1 certificate.

After you generate your iOS or Android apps in Firebase, you are ready to proceed. The rest of the video contains great content that you will likely need for real projects, but it’s not required for this tutorial.

In case you get stuck

If any of the steps in this tutorial do not work for you, consult this public repo, which breaks down the changes into distinct commits. Throughout the tutorial, you will find links to each commit where appropriate. Feel free to use this to verify that you’ve followed along as intended!

Create a simple state manager

To begin the process of integrating your app with Cloud Firestore, you must first refactor the generated code so that the initial StatefulWidget communicates with a separate class instead of its own attributes. This allows you to eventually instruct that separate class to use Cloud Firestore.

Next to your project’s auto-generated main.dart file, create a new file named counter_manager.dart, and copy the following code in it:

class CounterManager {
  /// Create a private integer to store the count. Make this private
  /// so that Widgets can't modify it directly, but instead must 
  /// use official methods.
  int _count = 0;
  /// Publicly accessible reference to our state.
  int get count => _count;
  /// Publicly accessible state mutator.
  void increment() => _count++;
}

#dependency-injection #flutter #firebase #cloud-firestore #testing