Flutter+Cloud Firestore — An App

In previous posts, we have looked at authenticating with Twitter from a Flutter app and also Flutters Drawer Widget.

Flutter Widget: Drawer

Flutter+Firebase — Authenticate with Twitter

Following with our Flutter Journey, we will be exploring building an app with Flutter which stores and queries data on Firebase Cloud Firestore.

What we aim to learn from this post

• Adding Cloud Firestore to our Flutter app;
• Storing an object in Cloud Firestore
• Querying stored object from Cloud Firestore; and

To achieve our learning objectives, we will be building a Visitor Registration app.

So imagine, a Visitor visits an organization and in place of writing his/her etails on the regular notebook at the reception. He/she enters these details using our app. 😃

Before we get into the code bit 😃, what is Firebase Cloud Firestore?? 🤔

Cloud Firestore is a cloud-hosted, NoSQL database that your iOS, Android, and web apps can access directly via native SDKs.

Add Cloud Firestore to our Flutter app

Before we can do this we will need to create a Flutter project. To achieve this we need to create

• A Flutter project

• A Firebase project

Once we have these, we can now add the Cloud Firestore dependency to our pubspec.yamlfile.

adding the cloud_firestore plugin to pubspec.yaml

Storing an object in Cloud Firestore

Whoops! Time to store our data in Cloud Firestore.💃

So where do we begin? 🤔

Lets first model our Visitor object.

Now that we have our Visitor modeled, let's persist (or save) in Firestore

What's happening in the save-object-in-firestore.dart snippet? 🤔

• We define a method named saveOrUpdateVisitor which takes two parameters — Visitor and signIn (of bool type);
• Create a collection called visitors — _firestore.collection(Constants.visitors);
• Deciding we do not want to use the autogenerated path value, we will use emailAddress as our unique id — `_firestore.collection(Constants.visitors).document(visitor.emailAddress); and
• Finally, save our Visitor in Firestore. setData takes a Map, reason we have converted Visitor to Map<String, dynamic>.

Querying stored object from Cloud Firestore

Now we have data saved, its time to query our stored data.

In find_attribute_in_cloud_firestore.dart above, we have a method findVisitor which accepts an email parameter

• email value is used to navigate the document path — _firestore.collection(Constants.visitors).document(email). This returns a DocumentReference
• Now that we have a DocumentReference, we can get() a Future<DocumentSnapshot>. A DocumentSnapshot contains data read from a document in our Firestore database.
• On success, we return the data from DocumentSnapshot, visitorSnapshot.data. This basically returns a Map<String, dynamic> which is our required return type. Worth noting here is dynamic which is a polymorphic representation of any type in dart land.
• On failure, we return an empty map — visitorData = new Map().

Not to worry a gif demonstration of the app is given below for both Android and iOS 😃

Android

iOS

Thanks again for taking the time to read through, please do feel free to leave comments below. And Yes, the full code is available on Github.

Gogetter/blog-posts