Supercharge your Flutter Apps for Android, iOS, and Web with Cloud Firestore Pt. 1 🔥
I. Introduction
Ever wonder how you can leverage the power of Cloud Firestore in your Flutter app? What you are about to read is a practical guide that is sure to help you do it.
Flutter Firestore Series 💙 🔥
- Part I — Firebase and Flutter Setup
- Part II — CRUD operations
- Part III — Firebase for Flutter Web (Coming soon!)
- Part IV — Dealing with complex queries (Coming soon!)
What is Flutter?
Flutter is a UI toolkit that allows you to build beautifully designed and high performing applications for multiple platforms, with improved developer productivity.
Using a single codebase, you can deploy your apps to Android, iOS, web, and desktop.
What is Dart?
Dart is the programming language used in building Flutter apps. Dart supports object-oriented programming, class definitions, as well as garbage collection.
Knowing Java, C, or similar programming languages can come in handy if you’re just starting to learn Dart.
What is Firestore?
Cloud Firestore (a.k.a Firestore) is a flexible, and scalable database for mobile, web and server development. It keeps your data in-sync across multiple clients through realtime listeners and offers offline support for both mobile and web.
II. Goal
This series will help you become comfortable using Firestore and display dynamic content in a production-ready Flutter app. I will teach you how to setup the project, read and sync data in realtime, work with dynamic contents, and write complex queries.
This is our project — a simple events management app. 😎
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.
git clone https://github.com/joshuadeguzman/flutter-examples.gitThen, check out the branch flutter_firestore_crud_starter.
cd flutter-examples
git checkout flutter_firestore_crud_starterProject 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
- screens — contains the feature UIs — page layouts and their custom widgets
- viewmodel — it is where most of our business logic classes are added
- widgets — 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
- 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.
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.
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.
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.
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.xcworkspace5. 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 -vGreat! You have successfully set up the sample project with your Firestore database.
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
- Twitter: joshuamdeguzman
- Github: joshuadeguzman
