Flutter: Can't add ListView to example app - flutter

Question

I'm having a hard time Googling my way out of this. I've created the default Flutter app that comes with the basic tutorial, and now I would like to add a ListView to it, like so:
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
),
],
),
),
The only thing I've added, is the ListView widget.
The error that I receive is this:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#d4bf6 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was:
Column file:///Users/user/code/project/lib/main.dart:77:16
════════════════════════════════════════════════════════════════════════════════════════════════════
Now, I've concluded that this has something to do with how the ListView is packed into its parent container, maybe that the rendering engine doesn't know how to handle the size of the list view, but I haven't been able to find information on how to actually fix it.

Answer 1

this is because the ListView by default wants to expand itself to fill available space. and cause you to wrap it with column it can't expand itself. you have two options here:
First is Wrap your Listview with Expanded widget. Expanded will take all the remaining available space for its child. for this option use below code:
Expanded(
child: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
),
),
the second option is to set shrinkWrap property of ListView to true. by doing this ListView don't expand itself:
ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
)

Answer 2

I think the problem comes from the fact that you place a ListView inside a Column. Hence you must provide a size to your ListView. the answer to this question provides a good code example to solve your issue.
The actual reason for this error is that both Column and ListView try to expands in vertical axis. hence you need to constrain the height of ListView.

Answer 3

listView has shrinkWrap attribute can you try:
ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
)