Home > Enterprise >  Fetch data from Firestore Document using StreamBuilder
Fetch data from Firestore Document using StreamBuilder

Time:01-01

I searched a lot, but couldn't find a solution to my problem.

In my Flutter app, I'm trying to get the data from a Document in Firestore. Here's the data I want to get :

Firestore document's data

I need to fetch that url from the Document. So far, when I needed to fetch data from a collection, I used a Streambuilder. But here I need to fetch data from a document, so I get this error message :

late Stream<DocumentSnapshot<Map<String, dynamic>>>? personnalData =
      FirebaseFirestore.instance
          .collection('Decembre')
          .doc(uid)
          .collection('Docs')
          .doc('test')
          .snapshots();

   StreamBuilder<QuerySnapshot>(
              stream: personnalData, // Error: The argument type 'Stream<DocumentSnapshot<Map<String, dynamic>>>?' can't be assigned to the parameter type 'Stream<QuerySnapshot<Map<String, dynamic>>>?'.
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Stack(
                  children: snapshot.data!.docs
                      .map((DocumentSnapshot document) {
                        Map<String, dynamic> data =
                            document.data()! as Map<String, dynamic>;

                        return PageView.builder(
                                            controller: _controller,
                                            itemCount: 3,
                                            itemBuilder: (context, index) {
                                             
                                              return Container(
                                                child: InteractiveViewer(
                                                  minScale: 0.1,
                                                  maxScale: 4.0,
                                                  child: Image.network(
                                                // FETCH URL FROM DOCUMENT 'TEST'
                                                    width:
                                                        MediaQuery.of(context)
                                                            .size
                                                            .width,
                                                    fit: BoxFit.cover,
                                                    loadingBuilder: (context,
                                                        child,
                                                        loadingProgress) {
                                                      if (loadingProgress ==
                                                          null) {
                                                        return child;
                                                      } else {
                                                        return Center(
                                                          child:
                                                              
                                                   CircularProgressIndicator(),
                                                        );
                                                ),
                                              );
                                            }),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            child: Text('Open'));
                      })
                      .toList()
                      .cast(),
                );
              },
            ),

Any suggestions ?

CodePudding user response:

Refer the following example:

StreamBuilder<QuerySnapshot>(
    stream:  FirebaseFirestore.instance.collection('Decembre').doc(uid).collection('Docs').doc('test').snapshots(),
    builder: (context, snapshot) {
        if (snapshot.hasData) {
        return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
                DocumentSnapshot doc = snapshot.data!.docs[index];
                return Column(
                       children:[
                           Text(doc['url'])
                       );
            });
        } else {
        return Text("No data");
        }
    },
)

CodePudding user response:

Maybe what you need is just to specify the type of the QuerySnapshot:

late Stream<DocumentSnapshot<Map<String, dynamic>>> personnalData =  // like this FirebaseFirestore.instance
      .collection('Decembre')
      .doc(uid)
      .collection('Docs')
      .doc('test')
      .snapshots();

because the snapshots() is a method that returns Stream<DocumentSnapshot<Map<String, dynamic>>>, and setting only Stream<DocumentSnapshot> will be considered as a different type, which throws the error.

CodePudding user response:

maybe you can try

 StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
              stream: personnalData,
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Stack(
                  children: snapshot.data!.docs
                      .map((DocumentSnapshot document) {
                        Map<String, dynamic> data =
                            document.data()! as Map<String, dynamic>;

                        return PageView.builder(
                                            controller: _controller,
                                            itemCount: 3,
                                            itemBuilder: (context, index) {
                                             
                                              return Container(
                                                child: InteractiveViewer(
                                                  minScale: 0.1,
                                                  maxScale: 4.0,
                                                  child: Image.network(
                                                // FETCH URL FROM DOCUMENT 'TEST'
                                                    width:
                                                        MediaQuery.of(context)
                                                            .size
                                                            .width,
                                                    fit: BoxFit.cover,
                                                    loadingBuilder: (context,
                                                        child,
                                                        loadingProgress) {
                                                      if (loadingProgress ==
                                                          null) {
                                                        return child;
                                                      } else {
                                                        return Center(
                                                          child:
                                                              
                                                   CircularProgressIndicator(),
                                                        );
                                                ),
                                              );
                                            }),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                            child: Text('Open'));
                      })
                      .toList()
                      .cast(),
                );
              },
            ),

in streamBuilder you can add <DocumentSnapshot<Map<String, dynamic>>> same as you create stream.

  • Related