Flutter: RenderBox was not laid out

Question

I\'m trying to create a ListView but when I import the list_form.dart class i get this error. Maybe I made some mistakes with the layout because if I try to run it inside th

Answer 1

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,
    )

,

Answer 2

Placing your list view in a Flexible widget may also help,

Flexible( fit: FlexFit.tight, child: _buildYourListWidget(..),)

Answer 3

I had a simmilar problem, but in my case I was put a row in the leading of the Listview, and it was consumming all the space, of course. I just had to take the Row out of the leading, and it was solved. I would recomend to check if the problem is a widget larger than its containner can have.

Answer 4

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(...),
       )
     ],
   )
   

---

2. 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(),
       )
     ],
   )
   

---

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

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

Answer 5

You can add some code like this

ListView.builder{
   shrinkWrap: true,
}

Answer 6

I used this code to fix the issue of displaying items in the horizontal list.

new Container(
      height: 20,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          ListView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            itemCount: array.length,
            itemBuilder: (context, index){
              return array[index];
            },
          ),
        ],
      ),
    );