Michele Lacorte
Michele Lacorte

Reputation: 5363

Renderbox was not laid out: Horizontal ListView inside Column

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();
        },
      );

Upvotes: 0

Views: 50

Answers (1)

Dominik Šimoník
Dominik Šimoník

Reputation: 1602

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.

Upvotes: 3

Related Questions