Flutter: RenderBox was not laid out Flutter: RenderBox was not laid out dart dart

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

  1. Use either Expanded or Flexible if you want to allow ListView to take up entire left space in Column.

    Column(  children: <Widget>[    Expanded(      child: ListView(...),    )  ],)

  1. Use SizedBox if you want to restrict the size of ListView to a certain height.

    Column(  children: <Widget>[    SizedBox(      height: 200, // constrain height      child: ListView(),    )  ],)

  1. Use shrinkWrap, if your ListView isn't too big.

    Column(  children: <Widget>[    ListView(      shrinkWrap: true, // use it    )  ],)