Reading lists from Firestore using StreamBuilder in Flutter
Tags: Firebase, Streambuilder, Flutter, Flutter Widget, Firestore

Reading lists from Firestore using StreamBuilder in Flutter BleylDev Follow Jul 21 · 3 min read

One of the first things that I had to learn when I picked up flutter development a couple of years ago was how to use StreamBuilders. StreamBuilders allow apps to display asynchronous data, or data that is constantly changing. Say you have an app where a user can read and add information to a list such as a social media feed. Chances are that you’re going to need that data to load in realtime without needing to refresh the page, this is where StreamBuilders come into play. In this example we are going to be reading a list of documents and variables tied to those documents that are all contained in a Collection in FireStore.

First, you’ll want to make sure that you have your project set up to connect to your Firestore db. If you haven’t done this yet, go to firebase.google.com and go ahead and setup your app to connect to Firebase. Checkout the first half of this article on how to setup your app if you don’t know what to do: https://itnext.io/firebase-authentication-in-flutter-2020-made-simple-19eaad197bfe

We then want to make sure that we’ve installed the package for cloud_firestore so that we can reference our data in our app.

https://pub.dev/packages/cloud_firestore

Next, we will want to create our StreamBuilder widget in our app.

Scaffold(

floatingActionButton: null,

body: StreamBuilder(



),

);

StreamBuilder has 2 key properties that we need to fill out: stream, builder.

Lets go ahead and define our stream for our Firestore Collection that we want to read from.

StreamBuilder(

stream: Firestore.instance.collection('Videos').snapshots(),

),

What you will want to do is navigate your way to the collection that you’d like to read data from. In my case, it’s the base-level collection called “Videos”. Yours may look something like:

collection('Users').document('uidHere').collection('destination').snapshots()

The important thing to do is just navigate to the correct collection and then call “.snapshots()” at the end. This stream will grab all relevant documents found under that collection to be handled inside our “builder” property.

Next, let's define our builder property.

StreamBuilder(

stream: Firestore.instance.collection('Videos').snapshots(),

builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){



}

),

With the current version of cloud_firestore, you’ll need to make sure you define the type of snapshot in order for it to build properly (AsyncSnapshot<QuerySnapshot>).

Next, we want to be sure to check if we got data successfully. If we either returned no data, or it’s still loading, we want to be sure to display a progress indicator or something similar.

StreamBuilder(

stream: Firestore.instance.collection('Videos').snapshots(),

builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){

if(!snapshot.hasData){

return Center(

child: CircularProgressIndicator(),

);

}

}

),

If we have received data, we want to now build out our ListView widget to display that data.

StreamBuilder(

stream: Firestore.instance.collection('Videos').snapshots(),

builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){

if(!snapshot.hasData){

return Center(

child: CircularProgressIndicator(),

);

}



return ListView(

children: snapshot.data.documents.map((document) {



}).toList(),

);

}

),

What this widget is doing is building out a list of each document contained in the snapshot documents list. We can now create a ListTile or any other customized widget we’d like using the data found in each document in our Collection.

StreamBuilder(

stream: Firestore.instance.collection('Videos').snapshots(),

builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){

if(!snapshot.hasData){

return Center(

child: CircularProgressIndicator(),

);

}



return ListView(

children: snapshot.data.documents.map((document) {

return Center(

child: Container(

width: MediaQuery.of(context).size.width / 1.2,

height: MediaQuery.of(context).size.height / 6,

child: Text("Title: " + document['title']),

),

);

}).toList(),

);

}

),

You can reference the variable’s found in each document by calling: document[‘yourVariableHere’].

Snippet of result

And that’s it! StreamBuilders are the easiest way to display lists of data contained in Firestore.

For more weekly Flutter content be sure to follow both here and on Youtube @ Bleyldev.