Why Can't I Define the Height of an Inner Container? - flutter

Question

No matter what I do I can't seem to adjust the height of a nested Container in my flutter app. It always seems to inherit the height of the parent Container. Everything I read online said to wrap the inner container with a Center(). I tried this but still ended up with the same issue.
final _recommendations = <String>["Embroidery", "Jewelry Making", "Tennis", "Hiking", "Disc Golf"];
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 16.0),
height: 200,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _recommendations.length,
itemBuilder: (context, index) {
return Container(
width: 150,
height: 50,
child: Card(
color: Colors.blue,
child: Center(
child: Text(_recommendations[index])
)
)
);
}
)
)
);
Seems to me like the height of ListView is defined by its parent which is Container. So I expect ListView to have a height of 200. Then the height of Card should be defined by its parent container which gives a height of 50. However Card instead takes a height of 200...

Answer 1

Usually, a ListView widget tries to fill all the available space given by the parent element, even when the list items would require less space. You can disable this feature using shrinkWrap parameter of ListView as follow:\
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _recommendations.length,
shrinkWrap:true,
itemBuilder: (context, index) {
return Container(
width: 150,
height: 100,
child: Card(
color: Colors.blue,
child: Center(
child: Text(_recommendations[index])
)
)
);
}
)