How should I get a scrollable set of widgets without overflow in case of FutureBuilder-CodePudding

I have a FutureBuilder in my code that generates a List of widgets based on the data fetched from Firestore. I want the screen to be scrollable without any overflow error. Here's my code:

          FutureBuilder<QuerySnapshot>(
              future:
                  FirebaseFirestore.instance.collection('Assignments').get(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasData) {
                  return Column(
                    children: snapshot.data?.docs.map((doc) {
                          return Column(
                            children: [
                              Subject(
                                  dataMap: doc.data() as Map<dynamic, dynamic>),
                              Divide()
                            ],
                          );
                        }).toList() ??
                        [],
                  );
                } else {
                  // or your loading widget here
                  return Text("Loading....");
                }
              },
            ),

Here is the output I'm getting on my screen:

I want this screen to be scrollable. I have used SingleChildScrollview but that is making full screen scrollable whereas I want only the list of widgets below the Assignment heading to be scrollable.

CodePudding user response：

You can use a ListView instead of multiple Column. A ListViewis scrollable so you shouldn't get any problems with overflowing widgets. The ListView.Builder constructor takes the itemCount and a builder where you simply return a widget for each ListItem.

Then your FutureBuilder would look like this:

FutureBuilder<QuerySnapshot>(
          future:
              FirebaseFirestore.instance.collection('Assignments').get(),
          builder: (BuildContext context,
              AsyncSnapshot<QuerySnapshot> snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (context, index) {
                     return Column(
                        children: [
                          Subject(
                              dataMap: snapshot.data.docs[index].data() as Map<dynamic, dynamic>),
                          Divide()
                        ],
                      );
                  },
              
              );
            } else {
              // or your loading widget here
              return Text("Loading....");
            }
          },
        ),