Reading lists from Firestore using StreamBuilder in Flutter

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.