Using Cloud Firestore as a Realtime Datastore for CRUD with Dart's Flutter Framework

in #utopian-io6 years ago

flutter-logo.jpg

Repository

https://github.com/flutter/flutter

What Will I Learn?

  • You will learn how to use Cloud Firestore on Flutter
  • You will learn how to implement Create, Read, Update and Delete commands with Firestore
  • You will learn how Streambuilders can reactively change the UI of stateless widgets
  • You will learn how to properly implement firestore and firebase transactions
  • You will learn how to avoid race conditions with Firestore

Requirements

System Requirements:
OS Support for Flutter:
  • Windows 7 SP1 or later (64-bit)
  • macOS (64-bit)
  • Linux (64-bit)

Required Knowledge

  • A little understanding of key/value stores
  • A fair understanding of Mobile development and Imperative or Object Oriented Programming
  • Some understanding of realtime databases

Resources for Flutter and this Project:

Sources:

Flutter Logo (Google): https://flutter.io/

Difficulty

  • Intermediate

Description

Outline and Overview

In this Flutter Tutorial Video, we build out a simple application using Cloud Firestore. The application allows the user to use Create, Read, Update and Delete (CRUD) on the pieces of data that we created. The data has a string title and an integer score. It also has a boolean value attached to it to signify when the user is editing a piece of data. The user can tap a list tile to open up a text editing field which allows them to write a new title into the field. They can also tap on various buttons to increment and decrement the score. There is a button at the top of the screen which is used to create new documents and a trash can button on the far right which deletes specific documents.

Outline for this Tutorial
Item 1: Setting Up and Using Cloud Firestore

Setting up Cloud Firestore for Flutter is almost identical to setting up Firebase. You go to the firebase console, create a new application, setup a Android and iOS project and then add the appropriate files to your Android and iOS folders. To properly setup Firestore from here, you go to the database tab and click on the firestore beta button which gives you a firestore database rather then a firebase database.

firestore.jpg

In this image you can see an example of the firestore database layout. On the top layer you have a database which contains a set of collections. Each collection contains a set of documents. These documents contain the data in key-value pairs that are similar to JSON. This type of layout has its advantages when compared to the Firebase JSON data layout. With firestore we have better querying and searching for data. Also, the database is much more suited for scaling. Most importantly, firestore is more secure then Firebase.

Item 2: CRUD in Firestore

The FlutterFire GitHub repositories have evolved quite a bit since we looked at Firebase. Now instead of having to instantiate a new firebase or firestore application using the firebase core library, we can directly reference the firestore or firebase object inside of our application and use it to preform transactions. We do not however, want to do this directly with firestore however, because it can potentially cause race conditions. If two users try to access a piece of data at the same time, then the data can get mangled and it can cause errors if we are accessing the database directly. This is why we use references and transactions to preform the various CRUD operations on our data.

transaction.jpg

Here you can see one of the transactions that we preform in this application. This transaction is what allows us to change the title's value and also close the editing window once the value has changed. You can see that we use a method called runTranscation which allows us to use a asynchronous callback. This asynchronous callback is crucial for avoiding race conditions. Inside of it we create a Datasnapshot of the database object that we want. We are then able to reference this object to make editing the fields of the database much easier.

Item 3: Using Builders to Update the Interface in Stateless Widgets

In this application we have no StatefulWdigets nor do we call the setState method. We can get away with this because we are using builder functions to create most of the widget tree. More specifically, we make use of the StreamBuilder and the ListView Builders to generate and update the User Interface of this application as the data changes in our database. Firestore lets use access the data in a stream format and we can use this abstraction to our advantage to make our application reactive.

streambuilder.jpg

In this image you can see the StreamBuilder Widget which is the heart of the application. The stream that we are inserting into it is the Firestore.instance.collection('flutter_data').snapshots() stream which grabs the event cycle of our firestore database's flutter_data collection and lets us generate asynchronous snapshots from it. Every time a piece of data is sent into our stream builder the widget tree below it is rebuilt according to the builder callback function.

The source code for this project can be found here

Video Tutorial

Projects and Series

Stand Alone Projects:
Building a Calculator
Movie Searcher Application

Minesweeper Game

Weather Application

Curriculum

Proof of Work Done

https://github.com/tensor-programming

Sort:  

Thank you for your contribution @tensor.
Keep up the good work.
It has been reviewed and scored accordingly.

Link to the Answers of the Questionnaire -

Click here


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

As always, thank you for moderating my contribution.

My God, what a wonderful explanation in terms of technology you offer us, I would like to know a quarter of it, but I am a little neonate in those networks. Sometimes they eat me ... jajajaj.Buen post .. I follow you.

I invite you to visit my latest publication. I would love to have your support .. thank you....

Hey @tensor
Thanks for contributing on Utopian.
We're already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70797.92
ETH 3553.00
USDT 1.00
SBD 4.76