How to use StreamBuilder to create a live listview from Cloud Firebase database in Flutter


Firebase is NoSQL database which offer live data for applications that run on mobile devices. It is work with Google cloud services. You can build simple data-application by creating a new Firestore database and follow those steps to integrate the service with your Android/iOS Flutter app.

This tutorial demonstrate how you can use a Stream builder to pull data , live data from the Cloud Firestore database to your device. The live data is made possible with Snapshot subscription.

body: Container(
          child:child: StreamBuilder(
            stream: FirebaseFirestore.instance.collection('karts').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) return Text('loading ...');
              return ListView.builder(
                itemExtent: 80,
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(snapshot.data.documents[index]['name']);
                  }
                 );}))

snapshot() subscription enables Flutter UI get notified whenever the collection get updated (add/delete/update) , before we filling the data to the Listview , made quick validation for the data using expression ( ? ), this is because sometimes data get blocked and will cause for some error.

1 thought on “How to use StreamBuilder to create a live listview from Cloud Firebase database in Flutter

  1. Pingback: How to use FutureBuilder to create a live listview from Cloud Firebase database in Flutter | Manoj's blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.