Attempt to display list data from Firestore causes overflow of pixels in flutter

Issue

I am attempting to display a list of data from firestore with this code:

@override
  Widget build(BuildContext context) {
    // <1> Use FutureBuilder
    return FutureBuilder<QuerySnapshot>(
        // <2> Pass `Future<QuerySnapshot>` to future
        future: FirebaseFirestore.instance.collection('UserNames').get(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // <3> Retrieve `List<DocumentSnapshot>` from snapshot
            final List<DocumentSnapshot> documents = snapshot.data.docs;
            return ListView(
                children: documents
                    .map((doc) => Card(
                          child: ListTile(
                            title: Text(doc['displayName']),
                            subtitle: Text(doc['plastics'].toString()),
                          ),
                        ))
                    .toList());
          } else if (snapshot.hasError) {
            return Text('Its Error!');
          }
        });
  }

This code is in a class called Scoreboard() and I am trying to call that class from another class called createdGroupHomePage() as such:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Palette.lightGreen,
        title: const Text('Group Home'),
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context)
                .pushAndRemoveUntil(HomeScreen.route, (route) => false);
          },
          child: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
        ),
      ),
      body: Builder(
        builder: (context) => Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 50,
                    ),
                    FutureBuilder(
                      future: getGroupName(),
                      builder: (_, AsyncSnapshot snapshot) {
                        if (snapshot.connectionState ==
                            ConnectionState.waiting) {
                          return Center(
                              child: CircularProgressIndicator(
                            backgroundColor: Palette.lightGreen,
                          ));
                        }
                        return Text(snapshot.data,
                            style: TextStyle(
                                color: Palette.lightGreen, fontSize: 30));
                      },
                    ),
                    SizedBox(height: 20),
                    Scoreboard(),  // Right here I am trying to display the list contents
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Unfortunately, when I go to the page in the app, it says overflow of pixels but 9,000 something, and I’m really not sure what to do. Do I have to wrap Scoreboard() in something or is it something else?

Solution

Since ListView widget does not have a set height, it has to be wrapped inside a widget with set height in order to be placed inside Column. If you want the ListView to take up all of the remaining space, you can wrap it with an Expanded widget like this:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50,
            ),
            FutureBuilder(
              future: getGroupName(),
              builder: (_, AsyncSnapshot snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Text(snapshot.data,
                    style: TextStyle(fontSize: 30));
              },
            ),
            SizedBox(height: 20),
            Expanded(
              child: Scoreboard(),
            ), // Right here I am trying to display the list contents
          ],
        ),
      ),
    );
  }

Answered By – dshukertjr

Answer Checked By – David Goodson (FlutterFixes Volunteer)