my list of array snapshot is in vertical flutter

Question

I try to get the snapshot of an array and I get it But when I display it in my app It’s in vertical as describe in the

image:

And This is the normal one in my cloud firestore (I want to display it in an horizontal ofcourse)

And here's the

code:

                        StreamBuilder(
                            stream: FirebaseFirestore.instance
                                .collection("groups")
                                .doc(groupId)
                                .snapshots(),
                            builder: (context,
                                AsyncSnapshot<DocumentSnapshot> snapshot) {
                              var userDocument = snapshot.data?["members"];
                              if (!snapshot.hasData) {
                                return Container();
                              }
                              return ListView.builder(
                                  //physics: const BouncingScrollPhysics(),
                                  itemCount: userDocument.length,
                                  shrinkWrap: true,
                                  itemBuilder: (context, index) {
                                    return StreamBuilder<DocumentSnapshot>(
                                        stream: FirebaseFirestore.instance
                                            .collection("users")
                                            .doc(userDocument[index])
                                            .snapshots(),
                                        builder: (context, snapshot1) {
                                   var userDocument = snapshot1.data?['fullName'];
                                          if (snapshot1.data == null) {
                                            return const Text('No Data');
                                          }
                                          return ListView.builder(
                                              itemCount: userDocument.length,
                                              shrinkWrap: true,
                                              itemBuilder: (context, index) {
                                            //Where I display the name in app
                                                return Center(
                                                    child: 
                                                  Text(userDocument[index]));
                                              });
                                        });
                                  });
                            })

Please take a look at the code

Answer 1

Give your ListView.builder a height by wrapping it inside a SizedBox. Then inside your ListView.builder, there is a parameter scrollDirection: Axis.horizontal,. Next, you can disable scrolling too.