Flutter Firestore Tutorial Part 1/2

Flutter Firestore Tutorial Part 1

In this Flutter Firestore Tutorial Part 1, we will make a small application to write, update, read, listen, filter, make a transaction and delete to/from Google Cloud Firestore. Also, we will implement a ListView, which updates whenever something is added to our Firestore database, as well as a swipe-to-delete functionality.

Flutter Firestore Tutorial

I will use Android Studio for this tutorial. For more information on how to set up Flutter, check here. But keep in mind, that we will use the Cloud Firestore, and not the Real-time Database here. Also, we don’t authenticate any users, so you might want to have a look at my Flutter Authentication Tutorial.

Setting everything up for the Flutter Firestore Tutorial Part 1

To get started, we have to set up Google Firebase for our project. So first of all, I will go through the process of setting up Firebase for Android in Android Studio here.

Add Firebase to your project

Copy .json file into Android/app

First, go to your Firebase console, and create a new project. Then, when the project is ready, add a new app to Firebase (Choose your phone OS). Follow the instructions, download the google-services.json file and copy it into your Android/app/ folder (see screenshot left). You can skip the last step, where Google waits for communication with their server, for now. For more information on how to set up Firebase for Flutter check here.

Create Cloud Firestore

Security Rules in Test Mode

Next, go to the Database tab on the left-hand side and create a new Cloud Firestore database. In addition, you can preset your security rules here too. Let us chose test mode because it will allow us to freely write and read from the database. Attention! Just use these security settings for testing! But, for your release versions, you should read into Cloud Firestore Security, in order to keep your data and potentially the data of your users save. You can start learning about security rules here. Also, you will always find your security rules under the ‘Rules’ tab at the top of the Cloud Firestore console.

Add dependencies to your project

Ok great. Next, go to your pubspec.yaml file in your project folder. Then add the following under dependencies:

Add dependency

Click ‘Packages Get’ and ‘Update Packages’ on the top. Good, now we are almost ready to start coding our little application.

Update your build.gradle files

Update build.gradle

You also have to update two of your build.gradle files. The first one you will find in /android/build.gradle and the second one is in /android/app/build.gradle. Please add the following code to the build.gradle files:

For the one located in /android/build.gradle, add the following to dependencies (please do not change the version of google-services for now. But keep in mind, that this can change, since Flutter is still in Beta. Check the official site, for the current version from time to time):

Add to ./android/build.gradle

And for the one located in /android/app/build.gradle please add this code snippet at the very end:

Add to ./android/app/build.gradle

Enable MultiDex

If you make this tutorial on Android, you most probably ran into this error: Cannot fit requested classes in a single dex file. Don’t worry, we will fix this. Keep in mind, that it may very well be, that the Flutter team will provide an automatic solution at some point in the future, but for now go into your Android/app/ folder and open build.gradle. Below the targetSdkVersion add the following line:

Enable MultiDex

This should fix the issue for SDK Version 21 and up. If you want MultiDex enabled for SDK Version 20 and lower, you have to make extra steps. I will not go into it right now, but you can check here and here for more information. Now everything should be set up and we can finally start coding our Flutter Firestore Tutorial Part 1.

Start coding the Flutter Firestore Tutorial Part 1

OK, so let us start with some code. But first, let me show you how I structured my app for this project.

Structure of the project

Strucutre of the project

You can structure your project as you wish, this is just the way I will structure it for the Flutter Firestore Tutorial Part 1. But if you structure it differently, keep in mind to make the necessary changes to the code. So, in your ./lib folder create a new one called /scr. And in there create two new dart files, one called home.dart and the other myApp.dart. Main.dart will be used to start up the app, myApp.dart will be used to change the theme and home.dart will be used for the whole code.

Main.dart

First, you can delete everything in main.dart, because we will write it from scratch. In addition, main.dart will just function as a starting point for our application. Import myApp.dart, where it will find MyApp().

Our runApp()

MyApp.dart

In myApp.dart we will just define the theme of our app and our home widget, which can be found in home.dart. Please chose whatever colours you like as your theme colours.

We set our theme

Home.dart

Here is, where the magic happens. Just kidding, no magic involved. First, let us create the skeleton of our app. Also, import cloud_firestore.dart here.

Nothing fancy so far, just an app bar. But you should be able to run the app already. So, check if it starts and if it does not work, please double check the integration with Firestore. If it still not works, then tell me in the comments and I will double check my tutorial ;).

Next, we will add all variables, that we will need. It will become clear for what we need them, as we start using them. But note, that we will dispose() our TextEditingControllers and also cancel our transactionListener subscription in the dispose() method.

So next, we will add a couple of widgets to our build widget. A lot of it is not hooked up with anything but don’t worry, eventually, it will.

Make the UI for the Flutter Firestore Tutorial Part 1

We create our main Column. So first, we make a Text for displaying, how many interactions we make with the app (show how to make transactions with Cloud Firestore). In addition, we add a Row with a TextField and a RaisedButton for writing to the Firestore database. Then, we add a Text and a Row for querying specific words in your database (show how to read and filter the Cloud Firestore). And we add a row to turn on and turn of a listener, that counts the documents in our database (show how to listen to the Cloud Firestore).

Also, we add a ListView with all the items in our Cloud Firestore database right below the last Divider().

And inside that ListView Widget, we add code, that allows us to swipe to delete an entry (show how to delete from Cloud Firestore). Also, we add a RaisedButton to every item, so that we can edit the chosen line (show how to update an entry in the Cloud Firestore database)

If you like, you can create the missing methods and leave them empty for now. We will finish everything in part 2.

That is the Flutter Firestore Tutorial Part 1/2. Click here for the second part, where we hook everything up.

Please keep in mind, that Flutter is still in beta, and things can change. I will try to keep everything up to date as good as possible though (except exact version numbers).

Originally published at www.gotut.net.