Flutter Firestore Tutorial Part 2/2
This is the Flutter Firestore Tutorial Part 2. Please check out the first part here, if you have not already. Here we will add all the necessary methods, in order to write, update, read, listen, filter, make a transaction and delete to/from Google Cloud Firestore. Again, we also will implement a ListView, which updates whenever something is added to our Firestore database, as well as a swipe-to-delete functionality.
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.
Write to Firestore
So far, everything should be set up and all the widgets should be visible. So, now we connect the different widgets, which we just created in part 1, with the methods. To write to Firestore, add the following clickWrite() method. Also, note, that the interact() method will make a transaction to the Cloud Firestore database, every time we interact with the app (for example write something, delete something or update something, etc.). We will add this method later (see chapter Make a Transaction).
Update an Entry
For updating an entry, we first create a small dialogue box, that opens when we click on ‘Edit’. Then, the dialogue box shows a TextField with the entry and a RaisedButton to execute the update. So with that functionality, we can change an entry.
When we click on ‘Update’, we call clickUpdate(), and we update the Firestore database. In addition, we count this as an interaction and at the end we pop() our dialogue box so that we navigate back to our main screen.
Read a filtered Query
With a click on our ‘Get’ button, we count all entries in our current database, that have a specific text (the text we wrote into the TextField). And the Text above the button will display how many entries with that text were found. Also, this too counts as an interaction.
Delete an Entry in the Flutter Firestore Tutorial Part 2
When we swipe an entry from right to left or left to right, we will call removeFromDb() and delete the entry from our Firestore database. Again, this also counts as an interaction.
Create a Listener
Whenever we turn on our switch, we start listening and show, how many entries there currently are in our database. And if we turn off the switch, we cancel() the subscription and stop listening for changes. Turning the Listener on/off does not count as an interaction here. But you could easily change that if you think it should count as an interaction too.
Make a Transaction in the Flutter Firestore Tutorial Part 2
Every time we interact with our database, we make a transaction and add +1 to our interactions counter. So, please create manually the following entry in your Cloud Firestore database.
For our transaction to work, we need a new collection with the name ‘stats’. And in it, we need a document called ‘interactions’ with a field called ‘count’. Then, hit the save button. You can, of course, create this also with code in your app, but I thought this way it is the fastest.
So next, we create a second listener in our initState(). It should update our Text, every time a new transaction is made. We create that listener when we open our app and cancel the subscription when we close it.
Also, we add the interact() method, to actually make the transaction to the Cloud Firestore database. In case you are not sure, what a transaction is, check here for more information. Basically, it ensures, that every (for example) increment counts. E.g. if you make a transaction and it is not finished before another client modifies the document already, Cloud Firestore retries the transaction. This way it ensures that the transaction runs on up-to-date and consistent data.
What your App can do
And, that is it! Now you see at the top of your app how often you interacted with your Cloud Firestore database (or in other words how many transactions you made).
In addition, you can write a text to your Firestore database. Every entry will be displayed in a scrollable ListView and will have a button to edit that entry. If you click on it, a dialogue box will pop up. In it, you can edit the text and update that entry on your database.
If you have entries in your database you can read and filter the number of entries with a specific text. Also, you can turn on/off a listener, that listens to any change to your database and if turned on, it will show you how many documents there are in total in your database.
And last but not least you will be able to delete an entry from your database by swiping that entry from left to right or from right to left.
So, I hope you enjoyed this little Flutter Firestore Tutorial Part 2! If you found this useful, tell me in the comments section below and maybe check out more Flutter tutorials. Also, check back from time to time, as I have a lot of tutorials planned for the future!
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.
