'Continuously Retrieving data from stream builder

I am trying to implement stream builder with cloud firestore to retrieve field data. Here is the code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test builder"),
      ),
      body:  StreamBuilder<QuerySnapshot>(
          stream: FirebaseFirestore.instance.collection('joystick').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
            if(!snapshot.hasData){
              return Center(
                child: CircularProgressIndicator(),
              );
            }

              return ListView.builder(
                  itemCount: snapshot.data?.docs.length,
                  itemBuilder: (context, i){

                    QueryDocumentSnapshot<Object?>? ds = snapshot.data?.docs[i];
                    return Text("$snapshot.data?.docs[i].data()!['call']");
                  });


          }
      ),

    );
  }

However, it does not output the actual data stored in the database. I get the following output:

AsyncSnapshot<QuerySnapshot<Object?
>>(ConnectionState.active,Instance of '_JsonQuerySnapshot',null, null).data?.docs[i].data()!['call']

What should I do to get the data stored in the database? (The field name is 'call')



Solution 1:[1]

In order to implement stream builder with cloud firestore to retrieve field data, you can follow the StreamBuilder Documentation and link related to explanation of streambuilder in flutter.

As mentioned the thread, you can go through the following code on retrieving data through streambuilder :

body: new StreamBuilder( 
   stream: Firestore.instance.collection("collection").snapshots(), 
   builder: (context, snapshot) { 
     if (!snapshot.hasData) {
   return Text( 'No Data...', ); 
} 
else { 
<DocumentSnapshot> items = snapshot.data.documents; 
return new Lost_Card( 
headImageAssetPath : items[0]["url"] ); 
}

If you want to create list builder from many documents use it like this

return new ListView.builder( 
itemCount: snapshot.data.documents.length, 
itemBuilder: (context, index) { 
DocumentSnapshot ds = snapshot.data.documents[index]; 
return new Lost_Card( 
headImageAssetPath : ds["url"]; 
);

For more information, you can refer to the Documentation where real time updates with cloud firestore have been explained.

Solution 2:[2]

What you are trying to achieve concerns RealTime database, Firestore database is not made for that.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2