CODEWITHSUNDEEP
flutterdartgoogle-cloud-firestore
Chris
Chris

Reputation: 41

How do I iterate through all documents in collection to show content in ListView?

My Goal I want to iterate through one collection containing 1…n documents. I want to put the content of the documents in in ListView. The collection represents the ListView and each document should be one ListTile.

My Firestore Data I have a Firestore database containing one collection called “current_question” containing multiple documents. Each document contains the details about one question: title, description, date and so on.

My doing so far I know how to show the data of one document. What I don’t know is, how to load all documents and publish them.

The code for loading one document:

body: FutureBuilder(
          future: connectToFirebase(),
          builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else {
              return StreamBuilder<DocumentSnapshot>(
                stream: database.getQuestions(),
                builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
                  if (!snapshot.hasData) {
                    return Center(child: CircularProgressIndicator());
                  } else {
                    Map<String, dynamic> items = snapshot.data.data;
                    print(items);
                    return ListView.builder(
                        itemCount: 1,
                        itemBuilder: (context, i) {
                          return ListTile(
                            title: Text(items['Titel'].toString()),
                            trailing: Text(items['Zaehler'].toString()),
                          );
                        }
                    );
                  }
                },
              );
            }
          }),

Future<void> connectToFirebase() async {
    final FirebaseAuth auth = FirebaseAuth.instance;
    AuthResult result = await auth.signInAnonymously();
    user = result.user;

    database = DatabaseService();
  }

final CollectionReference aktFragen = Firestore.instance.collection('aktFragen')/*.orderBy('Zaehler')*/;

  Stream getQuestions() {
    return aktFragen.document('xAGRoZCgiClrpeAPtb5B').snapshots();
  }

See the result in the screenshot: enter image description here

Upvotes: 0

Views: 1284

Answers (2)

Chris
Chris

Reputation: 41

Great answer by @Unbreachable!

This is how I implemented it:

  @override
  Widget build(BuildContext context) {
    return new StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('currentQuestions').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) {
          return Center(child: CircularProgressIndicator());
        } else {
          return new ListView(
            children: snapshot.data.documents.map((document) {
              return new ListTile(
                title: new Text(document['title'].toString()),
                subtitle: new Text(document['count'].toString())
              );
            }).toList()
          );
        }
      }
    );
  }

I also found a good youTube tutorial for this topic:

https://www.youtube.com/watch?v=Ak_6_pBBe3U&feature=youtu.be

Upvotes: 1

Unbreachable
Unbreachable

Reputation: 744

If you want to retrieve all documents then you will have to do a QuerySnapshot instead. Here is one way of doing it:

// Creating an instance of your model with all the users info 
  List<CustomModelNameHere> _myListSnapshot(QuerySnapshot snapshot) {
    return snapshot.documents.map((doc) {
      return CustomModelNameHere(
        title: doc.data["title"] ?? "",
        description: doc.data["description"] ?? "",
      );
    }).toList();
  }

 // Get the stream
  Stream<List<CustomModelNameHere>> get getQuestions {
    return aktFragen.snapshots()
      .map(_myListSnapshot);
  }

Upvotes: 1

Related Questions