Flutter listview bottom overflow - dart

Question

I'm attempting to create a scrollable listview inside of a container which also contains a static image. However, the listview doesn't appear to be scrollable and I get a "bottom overflow by x pixels" artifact on my app.
static List<Widget> getClubs() {
var myClubs = new List<Widget>();
for (var i = 0; i < 10; i++) {
myClubs.add(new Padding(
padding: EdgeInsets.all(8.0),
child: new CircleAvatar(
backgroundImage:
new NetworkImage("https://i.imgur.com/p2oUDLD.png"),
backgroundColor: Colors.black,
radius: 34.0,
)));
}
return myClubs;
}
final leftSection = new Container(
color: Color(0xFF212121),
width: 100,
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
new Image.asset(
'assets/logo.png',
alignment: Alignment.center,
),
SizedBox(height: 10.0),
new Container(
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(5.0),
children: getClubs(),
))
],
));

Answer 1

You can use Expanded widget or set the height for the Container.

Answer 2

I would also recommend Wrap for anyone running into an issue where a container is sized wrong within the listview, causing an overflow:
new Container(
alignment: Alignment.center,
child: Wrap( //the magic
children: [
new Container(),
],
),
),

Answer 3

Sometimes best way to fix an estimated height is using sizedbox
int heightToBeReduced = 380;
SizedBox(
height: MediaQuery.of(context).size.height - heightToBeReduced,
child: ListView....
)

Answer 4

wrap the Column in an Expanded widget:
Expanded(
child: Column(
),
),
Another way is to wrap the Column in a Flexible widget and specify a flex factor.
Flexible(
flex: 1,
child: Column(
children: [
],
),
),

Answer 5

I used a Flexible in a Row to control the output of the listview builder
Define the scollController
final _scrollController = ScrollController();
Define the ListView builder
ListView builder = ListView.builder(
itemCount: listPerformance?.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return PerformanceCardWidget(performanceView: listPerformance[index]);
});
Define a flexible that outputs the listview builder contents
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Flexible(
flex: 6,
fit: FlexFit.loose,
child: Scrollbar(
isAlwaysShown: true,
controller: _scrollController,
child: SingleChildScrollView(
controller: _scrollController, child: builder))
)
])