How to display my results in a list of cards from firestore with flutter

Question

I am currently working on a flutter app. And in my database I have a collection and in that I have documents. Each document has a subcollection. In that collection I have two documents. Post1 and Post2. I have problems with fetching that data and displaying that in a list of cards: So I want to display them in a list of cards. Every Card has in one side, the data from post1 and in the other side, the data for post2 I tried it with a futurebuilder, but I just cant do it. Would appreciate any help. My firestore DataBase:

I have that for every document. So for the second document, I have also the same structure. My code for displaying the list:

final generalreference = Firestore.instance.collection("General");
showpics() {
    return FutureBuilder (
        future: generalreference.getDocuments(),
        builder: (context,  querySnapshot) {
          if (!querySnapshot.hasData) {
            return Center(
                child: Text(
              "Loading...",
              style: TextStyle(
                fontFamily: "Montesserat",
                fontWeight: FontWeight.w700,
                fontSize: 40.0,
                fontStyle: FontStyle.italic,
              ),
            ));
          }
          List<PostList> postsresult = [];
          //QuerySnapshot eachitem = await generalreference.getDocuments(); \\ I am doing something wrong here
          querySnapshot.data.documents.forEach((element) async {
            DocumentSnapshot post1 = await  generalreference
                .document(element.documentID)
                .collection("posts")
                .document("post1")
                .get();
            Posts eachpost = Posts.fromDocument(post1);
            PostList postList = PostList(eachpost);
            postsresult.add(postList);
            //print("the posts is $postsresult");
          });
          print("the posts is $postsresult");

          return ListView(children: postsresult);
        });
  }

My PostList class:

class PostList extends StatelessWidget {
  final Posts picture1;
  PostList(this.picture1);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Card(
        elevation: 20.0,
        child: Column(children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              CircleAvatar(
                radius: 20.0,
                backgroundImage: NetworkImage(picture1.pic),
              ),

}

My posts model

class Posts{
  final String uid;
  final String email;
  final String username;
  final String id;
  final String pic;

  Posts(  {
    this.uid,
    this.email,
    this.username,
    this.id,
    this.pic
  });

  factory Posts.fromDocument(DocumentSnapshot doc){
    return Posts(
      uid: doc['uid'],
      email: doc['email'],
      username: doc['username'],
      pic: doc['Pic'],
      id: doc.documentID   );
  }
}

I am not getting any errors, I just cant see my pictures

Solution

So, i solved it in using a listview.builder as suggested by Uni, That solved my problem

Future<List<Post2>> getposts2() async {
    var eachdocument = await generalreference.getDocuments();
    List<Post2> posts = [];
    for (var document in eachdocument.documents) {
      DocumentSnapshot myposts = await generalreference
          .document(document.documentID)
          .collection("posts")
          .document("post2")
          .get();
      print(myposts['Pic']);
      Post2 post = Post2(myposts['Pic']);
      posts.add(post);
    }
    return posts;
  }

  showpics() {
    return FutureBuilder(
        future: Future.wait([getposts(), getposts2()]),
        builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
          if (!snapshot.hasData) {
            return Center(
                child: Text(
              "Loading...",
              style: TextStyle(
                fontFamily: "Montesserat",
                fontWeight: FontWeight.w700,
                fontSize: 40.0,
                fontStyle: FontStyle.italic,
              ),
            ));
          }
          return ListView.builder(
              itemCount: snapshot.data[0].length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  child: Card(
                    elevation: 20.0,
                    child: Column(children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          CircleAvatar(
                            radius: 20.0,
                            backgroundImage:
                                NetworkImage(snapshot.data[0][index].picture),
                          ),

Comments

[CoderUni]

use a listview.builder for that Check this out: flutter.dev/docs/cookbook/lists/long-lists

[Lalli Garden]

could u please show me a example. I am pretty new to flutter. But I will check that out. Thank u for the comment

[Lalli Garden]

@Uni thanks you solved my problem

[CoderUni]

You're welcome. Good Luck!