III. Getting started

Download the sample project

Run the following code to clone the sample project. This will create a folder named flutter-examples in your machine.

Then, check out the branch flutter_firestore_crud_starter.

cd flutter-examples

git checkout flutter_firestore_crud_starter

Project structure

Before writing any new line of code, let’s first discuss the sample project’s setup.

This project includes:

models — comprises of data entities, object models

comprises of data entities, object models screens — contains the feature UIs — page layouts and their custom widgets

contains the feature UIs — page layouts and their custom widgets viewmodel — it is where most of our business logic classes are added

it is where most of our business logic classes are added widgets — globally shared widgets in our app

globally shared widgets in our app main.dart — serves as the entry point of our Flutter app

In this app, it’s important to note that we will use these two plugins:

cloud_firestore — official Firestore plugin from the Flutter team

— official Firestore plugin from the Flutter team provider — a plugin for dependency injection and state management

Firestore

FirestoreApi class will contain the functions we need for our CRUD application. CollectionReference allows us to perform queries on our database such as adding or updating documents, and listening to real-time database updates.

flutter_firestore_crud/lib/services/firestore.dart

Although this is just a small project, it’s best if we start tidying up our codebase by extending the API class for us to reduce possible code duplication.

flutter_firestore_crud/lib/services/events_api.dart

In this example, EventsApi is a child of FirestoreApi . This allows us to create more feature-specific API classes, without re-implementing the common functions.

Example feature-specific API

ChangeNotifier

ChangeNotifier is a class included in the Flutter SDK which notifies its listeners if there are changes in its values, assuming the notifyListeners() method is called. In our project, we will not use notifyListeners() to broadcast the changes. Instead, we will directly consume the documents using a Future or Stream .

flutter_firestore_crud/lib/viewmodel/events_notifier.dart

Provider

This series is meant for beginners, so we will only use basic APIs of the provider plugin. Provider plugin serves as our state management and dependency injection for our widgets and other Dart classes. It’s a plugin that is simple enough for you to be able to follow along while keeping maintainability and scalability in mind.

IV. Create a Firebase project

1. Sign in to your account to Firebase console.

2. In the Firebase Console, click Add Project.

3. Enter a name for your Firebase project. For example, “Events Booking”, and click Continue.

4. Choose whether you want to integrate Google Analytics for the project, then click Continue.

5. Lastly, if you Firebase is done creating your project, just click Continue.

Note: We will use the free Spark plan, which should be good enough for the development purposes of this project.

V. Register your Flutter app to Firebase

Android

1. To register for an Android app, click the Android logo.

2. Fill in the details, then click Register app.

3. Download the google-services.json file, then move it to your project’s android/app directory.

iOS

1. To register for your iOS app, tap on the Project Overview in the left nav. Click Add app, then select iOS.

2. Fill in the details, then click Register app.

3. Download the GoogleService-Info.plist file.

4. In your terminal, open Runner.xcworkspace .

open ios/Runner.xcworkspace

5. Drag the GoogleService-Info.plist file to your project’s ios/Runner directory in your XCode app window.

VI. Preparing your Firestore database

Let’s start creating our Firestore database. We will create our very first collection with initial documents.

1. Open the Firebase Console, and open the Firebase project you created during set up.

2. In the Project Overview pane, click Database.

3. In the Firestore window, click Create Database.

4. In the Security rules for Firestore dialog, select Start in test mode, then click Next.

Remember: In our project, we will start in test mode so we could start with the development conveniently. However, if you want to ship your app in production, you should add security rules.

1. In choosing the Set Cloud Firestore Location dialog, select the location that’s near to the users and services that need it. Please refer to this document.

2. To create a database collection, click + Start Collection. The name added will serve as the path for your collection. For example, events will have a path of “/events”.

3. (Optional) Next, we will create our first document by defining the fields with initial values. Leave the Document ID blank.

4. Click Save.

In this project, we will be using the random IDs generated by Firestore so that it will automatically handle the uniqueness of the documents within a collection.

Run the app

In your terminal, please run the following command:

cd flutter_firestore_crud

flutter run -v

Great! You have successfully set up the sample project with your Firestore database.

Excited for the next one? Cat: blep blep blep (“yes!”)

If you can’t wait til’ tomorrow, start reading the next article in this series— where you will learn how to deal with CRUD operations in your Flutter app using Firestore.

VII. Resources

For Flutter trainers and organizers, I have written this in a codelab format — please check it out!

If this helped you, please don’t forget to ⭐ the repo. Thank you!

Let’s keep in touch

https://www.twitter.com/FlutterComm