Skip to content

Flutter Listviews with Cloud Firestore

Flutter is relatively new to the mobile development ecosystem but it’s already proving to be strong competition against Xamarin and React Native. To many developers, it’s already the de facto solution for building cross-platform apps.

Cloud Firestore too is a powerful tool at the hands of indie developers (and in certain situations, bigger companies as well) due to its ability to provide a back-end as a service.

Cloud Firestore can already integrate well into flutter. Google even has codelabs for it.

In this tutorial, we’re going to get right into how to add Firestore into your project and learn how to push data, retrieve snapshots, and perform some basic queries.

Prerequisites

Before this tutorial begins, you need to have already connected your Flutter app to Firebase. The Firebase docs includes a nice tutorial on how to do this.

Import the Dependencies

dependencies:
  flutter:
    sdk: flutter

  cloud_firestore: ^0.12.10+2

Add the Cloud Firestore dependency like so in your pubspec.yaml file. Make sure you get the latest version too.

Get an instance of your database

import 'package:cloud_firestore/cloud_firestore.dart';

final databaseReference = Firestore.instance;

Import Firestore into your dart file and get a reference to your database as shown.

Set/Add Documents

databaseReference
    .collection("users")
    .document(_user.uid)
    .setData(
    {
      'vote': entry.team,
    },
    merge: true)
    .then((_) => {

    });

Call setData like so to either overwrite a document at a specified location, or create it if it doesn’t exist. You have to pass in a map of data the document is to contain, and an optional merge parameter.

If merge is true, only data specified in the map you passed in will be affected (thus other data existing in the document can be retained). Otherwise, the whole document will be overridden to what you passed in as a map, regardless of what data that document contained beforehand.

SetData vs Add

databaseReference
    .collection("users")
    .add(
    {
      'vote': entry.team,
    })
    .then((documentReference) => 
    {
       handleDocumentAdded()
    });

As it is in other platforms, calling setData on a document will override (or merge) the document at the specified location with the map you pass in.

Add on the other hand, will push a new document with an automatically generated ID at the collection you call it in.

They also differ in the response you get from their then clauses. SetData simply gives you a void response, while add gives you a documentReference.

Getting Data

Getting a Document

databaseReference
    .collection("users")
    .document(_user.uid)
    .get()
    .then((user) => {
      handleGetUsers()
    });

 

To perform a simple query of a document, simply call get and you’ll get back a response containing the document you called get on.

Getting Documents in a Collection

databaseReference
    .collection("entries")
    .snapshots()
    .listen((entries) => {
      handleEntries(entries.documents)
    });

 

For collections, we have to retrieve a querySnapshot which is what we get as a response in the above code. The querySnapshots contains a list of documentReferences where we can parse our documents individually.

Adding where statements

databaseReference
    .collection("entries")
    .where("team", isEqualTo: "orange")
    .snapshots()
    .listen((entries) => {
      handleEntries(entries.documents)
    });

 

We can narrow down our query by adding a simple where statement before we call snapshots. We can see the operators we can use from the source code.

Query where(
    dynamic field, {
      dynamic isEqualTo,
      dynamic isLessThan,
      dynamic isLessThanOrEqualTo,
      dynamic isGreaterThan,
      dynamic isGreaterThanOrEqualTo,
      dynamic arrayContains,
      bool isNull,
    })

And That’s It

Firestore has always been a powerful tool since its incarnatio. Being able to use it in Flutter only allows us to leverage its power even more.

Everything I covered here in the tutorial are just the basics. At the time of this writing though, using Cloud Firestore in Flutter isn’t covered in the Firebase Docs (perhaps outside of Google codelabs).

If you find this tutorial useful, let me know by leaving a comment and tell me if I should cover the basics of other Firebase tools for Flutter.

Tags: