Use ConstrainedBox or SizedBox
- Wrap your widget that causes the unbounded height issue within a
ConstrainedBox or SizedBox to specify a bounded height.
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints(maxHeight: 300.0),
child: ListView(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
),
);
}
Use Flexible or Expanded within a Column
- If you are using a
ListView inside a Column, wrap it with Flexible or Expanded to allow it to take up available space.
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
),
),
],
);
}
Use SingleChildScrollView
- Consider using a
SingleChildScrollView if you're nesting scrollable widgets which could cause a conflict in scroll behaviors.
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
),
);
}
Add Parent with Bounded Height
- If possible, enclose the problematic widget inside a parent widget with a defined height, such as
Container with a height property.
Widget build(BuildContext context) {
return Container(
height: 300.0,
child: ListView(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
),
);
}
Use IntrinsicHeight
- For cases where a widget should match the height of its content, consider using an
IntrinsicHeight widget.
Widget build(BuildContext context) {
return IntrinsicHeight(
child: Column(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],
),
);
}
