Vertical viewport was given unbounded height error

Question

 @override
 Widget build(BuildContext context) {
   return Column(
     children: <Widget>[
       new Text("Some text"),
       ListView()
     ],
   );
 }

 Widget ListView() {
   return ListView(
     padding: EdgeInsets.symmetric(vertical: 8.0),
     children: Item(),
   );
 }

 List<Item> Item() {
   return list
     .map((item) => Item(text: item))
     .toList();
 }

 class Item extends ListTile {
   Item({String text, GestureTapCallback onTap})
    : super(subtitle: Column(children: <Widget>[
        Text(text),
      ]));
 }

A blank space appears on the screen and the console says:

Vertical viewport was given unbounded height. Viewports expand in the scrolling direction to fill their container.

score 41 · Answer 1 · answered Aug 08 '18 at 07:41

41

Wrapping ListView inside Flexible will make it work.

Widget ListView() {
return new Flexible(child: new ListView(
    padding: new EdgeInsets.symmetric(vertical: 8.0),
    children: Item()));
}

answered Aug 08 '18 at 07:41

jaede

859
1
8
13

I would also add that it seems that if you're using a `Padding` widget, you should put it inside the `Flexible` widget. – Philippe Fanaro Nov 03 '19 at 18:10
It does not work, I am getting "RenderFlex children have non-zero flex but incoming height constraints are unbounded." – giorgio79 May 24 '20 at 12:43
it works for me. though i do not understand why if Flexible is used the error goes away. – chitgoks Jun 10 '20 at 03:11

score 6 · Answer 2 · answered Feb 11 '19 at 19:08

The best solution is to use Flexible, but if you want to give it an exact height you should use Container like this:

    Widget ListView() {
    return Container(
       height:100.0,
       child: ListView(
        padding: new EdgeInsets.symmetric(vertical: 8.0),
        children: Item()));
    }

Vertical viewport was given unbounded height error

2 Answers2

Linked