Renderbox was not laid out: Horizontal ListView inside Column

Question

I want to achive this layout:

ListView (vertical) -> ListView (horizontal) -> Card item (with fixed size)

But I can't understand why show renderbox error.

Main ListView:

return ListView(
children: [
   ...
   HorizontalList()
   ...
 ],
);

Horizontal ListView:

return ListView.builder(
        shrinkWrap: true,
        padding: const EdgeInsets.all(21.0),
        scrollDirection: Axis.horizontal,
        itemCount: _myData.length,
        itemBuilder: (context, index) {
          return MyCard();
        },
      );

score 3 · Accepted Answer · answered Jul 05 '22 at 11:12

Your horizontal listview does not have height, it would now use infinite render box of ListView and that end up in RenderBox error. Try for example SizedBox on your main ListView:

return ListView(
children: [
   ...
   SizedBox(
    height: 300,
    child: HorizontalList(),
   )
   ...
 ],
);

You can also use Flex widgets if you want to make your height more dynamic.

Renderbox was not laid out: Horizontal ListView inside Column

1 Answers1