Putting Widget above a ListView in Flutter

Issue

The below code is working fine with me for calling and displaying data from firestore:

return ListView(
 padding: const EdgeInsets.only(top: 20.0),
 children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);

But If I tried to put it in a column so I add another widget above it, it fails and give stack overflow:

return Column(
    children: <Widget>[
    Text('Hellow'),
  ListView(
  padding: const EdgeInsets.only(top: 20.0),
  children: snapshot.map((data) => _buildListItem(context, data)).toList(),
)]);

Solution

You need to put your ListView inside an Expanded widget so it knows how much space it can fill.

return Column(
    children: <Widget>[
      Text('Hellow'),
      Expanded(
        child: ListView(
          padding: const EdgeInsets.only(top: 20.0),
          children:
              snapshot.map((data) => _buildListItem(context, data)).toList(),
        ),
      ),
    ],
  );

Answered By – Jordan Davies

Answer Checked By – Marilyn (FlutterFixes Volunteer)