Problems with Splitting in Flutter

Question

Good evening!! I am creating a social network feed with Flutter, and I find myself with a problem in the display of the images.

Divider should appear between the two images, however, what is happening is that it takes the two images I have in a Firebase collection, and repeats them sharing with Divider. Follows the code:

FutureBuilder<QuerySnapshot>(
          future: Firestore.instance.collection("fotos").getDocuments(),
          builder: (context, snapshot){
            if(!snapshot.hasData){
              return Container(
                height: 200,
                alignment: Alignment.center,
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.deepOrange),
                )
              );
            }else{
              return ListView.separated(
                itemBuilder: (context, index){
                  return Column(
                    children: snapshot.data.documents.map(
                      (doc){
                        return Container(
                          child: FadeInImage.memoryNetwork(
                          placeholder: kTransparentImage, 
                          image: doc.data["urlImagem"],
                          fit: BoxFit.cover,
                        ),
                        );
                      }
                    ).toList()
                  );
                },
                separatorBuilder: (context, index) => Divider(
                  height: 50,
                  thickness: 0,
                  color: Colors.red,
                ),
                itemCount: snapshot.data.documents.length,
              );
            }
          },
        )

What can I do to make every image recovered in the Firestore split with a Split ?

Answer 1

You’re playing all the pictures in one Column and that way only after the separator will be created, do it as follows:

  ListView.separated(
    itemBuilder: (context, index){
      return Container(
          child: FadeInImage.memoryNetwork(
          placeholder: kTransparentImage, 
          image: snapshot.data.documents[index].data["urlImagem"],
          fit: BoxFit.cover,
        ),
      );
    },
    separatorBuilder: (context, index) => Divider(
      height: 50,
      thickness: 0,
      color: Colors.red,
    ),
    itemCount: snapshot.data.documents.length,
  );

So after each created item there will be a separator.