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


We have already learn how to build a Firebase Firestore collection listview using StreamBuilder and a Listview builder. Dart has capable of async operations which promise error free data integration for you app. Flutter also support Future which is Flutter API for pure async operations.

Future builder takes a Future which is the data or function that return promising data or error and Future Builder function which extract those data . Here is sample code

body: Container(
        child: FutureBuilder(
          future: FirebaseFirestore.instance.collection('karts').get(),
          builder: (context, snapshot) {
            return snapshot.hasData
                ?   ListView.builder(
              itemExtent: 80,
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
            return ListView.builder(
              itemExtent: 80,
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(snapshot.data.documents[index]['name']);
                }
                );}))

The future builder block the other section until it get access to the collection ‘karts’ as a result the UID automatically get updated.

Filtering data in a Future

We can also query data in future using the where , which will help use to filter the data in place.

future: FirebaseFirestore.instance.collection('products').where('mfr',isEqualTo: 'TATA').get(),

The above line in the future of a FutureBuilder fetch only those document ( row ) which has ‘mfr’ field and equal to ‘TATA’. The exact method can also applied to a StreamBuilder too.

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.