1

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:

enter image description here

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.

enggPS
  • 686
  • 1
  • 7
  • 23

1 Answers1

2

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....");
            }
          },
        ),
Ruben Röhner
  • 593
  • 4
  • 16
  • I have tried this but its giving me this error: 'Vertical viewport was given unbounded height' – enggPS Dec 12 '21 at 10:47
  • I have tried for shrinkWrap: true but in that case the problem of overflow was still there. – enggPS Dec 12 '21 at 10:54
  • 1
    Then you can just wrap your FutureBuilder inside an `Expanded` widget – Ruben Röhner Dec 12 '21 at 10:58
  • Idea of Expanded widget worked. But I'm curious why that error happened. – enggPS Dec 13 '21 at 10:20
  • 1
    As this solution is working for you, I assume that your FutureBuilder is inside a Column Widget. The problem is that both the Column and the ListView Widget expand to the maximum size in main axis direction, so the ListView can expand without any boundary. Here are more detailed explanations: https://flutteragency.com/add-a-listview-to-a-column/ and https://stackoverflow.com/questions/45669202/how-to-add-a-listview-to-a-column-in-flutter – Ruben Röhner Dec 14 '21 at 11:16