List data from collection with Flutter and Firebase-CodePudding

I just learning Flutter and I'm trying to make a barber appointment system. I'm stuck at the barbershop panel. Now, my goal is to write the data as below into the squares I have drawn and using a gridview to make a system that will update the data of the appointment as it will listen to the database in real time every time an appointment comes. Summary, if new data is entered into the database, a new square will appear at the bottom and display the data.

i want to do

But while writing the code, I keep getting this error.

error 1

error 2

here my code:


 final Stream<QuerySnapshot> dateRef =
      FirebaseFirestore.instance.collection('date').snapshots();



StreamBuilder<QuerySnapshot>(
              stream: dateRef,
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return Text('Bir şeyler ters gitti');
                }
                return ListView(
                  children:
                      snapshot.data!.docs.map((DocumentSnapshot document) { <---- error is here
                    Map<String, dynamic> data =
                        document.data()! as Map<String, dynamic>;
                    return ListTile(
                      title: Text(data['Ad']),
                      subtitle: Text(data['Soyad']),
                    );
                  }).toList(),
                );
              },
            ),

Kod Planet I tried to call the data before watching the video on his channel, I got the above errors.
dbestech I changed the code by watching the video on his channel, it didn't work again, I keep getting the same errors in the same place.
Cloud Firestore | FlutterFire I tried the codes in the realtime changes header from the document, it still didn't work.

CodePudding user response：

Your StreamBuilder's builder has two widget options to show and access, the ListView where you want to show your response, and a Text on error, right?

When the StreamBuilder get put in the widget tree, the dateRef stream will get called for its first time, and there is no error because it didn't get the first response, but something needs to be shown until that, so the ListView get called to be rendered, and at this point, no snapshot is there, so snapshot.data is null.

you need simply to set something to show until the first response is got, the common use for this is a CircularProgressIndicator widget :

StreamBuilder<QuerySnapshot>(
              stream: dateRef,
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return Text('Bir şeyler ters gitti');
                }
               if(snapshot.connectionState == ConnnectinState.waiting) { // add this
                 return Center(child: CircularProgressIndicator ());
                }
                return ListView(
                  children:
                      snapshot.data!.docs.map((DocumentSnapshot document) { 
                    Map<String, dynamic> data =
                        document.data()! as Map<String, dynamic>;
                    return ListTile(
                      title: Text(data['Ad']),
                      subtitle: Text(data['Soyad']),
                    );
                  }).toList(),
                );
              },
            ),

now a loading indicator will be shown until it gets the first response from Firebase, then it will show the ListView as you expect.