Flutter: RenderBox was not laid out
The problem is that you are placing the ListView
inside a Column/Row. The text in the exception gives a good explanation of the error.
To avoid the error you need to provide a size to the ListView
inside.
I propose you this code that uses an Expanded
to inform the horizontal size (maximum available) and the SizedBox
(Could be a Container) for the height:
new Row(
children: <Widget>[
Expanded(
child: SizedBox(
height: 200.0,
child: new ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: products.length,
itemBuilder: (BuildContext ctxt, int index) {
return new Text(products[index]);
},
),
),
),
new IconButton(
icon: Icon(Icons.remove_circle),
onPressed: () {},
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
)
,
You can add some code like this
ListView.builder{
shrinkWrap: true,
}
Reason for the error:
Column
tries to expands in vertical axis, and so does the ListView
, hence you need to constrain the height of ListView
.
Solutions
-
Use either
Expanded
orFlexible
if you want to allowListView
to take up entire left space inColumn
.Column( children: <Widget>[ Expanded( child: ListView(...), ) ], )
-
Use
SizedBox
if you want to restrict the size ofListView
to a certain height.Column( children: <Widget>[ SizedBox( height: 200, // constrain height child: ListView(), ) ], )
-
Use
shrinkWrap
, if yourListView
isn't too big.Column( children: <Widget>[ ListView( shrinkWrap: true, // use it ) ], )