Vertical viewport was given unbounded height

Question

This is my code:

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
           


        

Answer 1

This generally happens when you try to use a ListView/GridView inside a Column, there are many ways of solving it, I am listing few here.

1. Wrap ListView in Expanded

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

2. Wrap ListView in SizedBox and give a bounded height

   Column(
     children: <Widget>[
       SizedBox(
         height: 400, // fixed height
         child: ListView(...),
       ),
     ],
   )
   

3. Use shrinkWrap: true in ListView.

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

Answer 2

This answer is based on the north of the @CopsOnRoad

This happens because the ListView/GridView widget has no parent to take its size , so its height is infinite and is the flutter does not know the height of the ListView and cannot render.

1. Solution one: fixed height

   Wrap it up directly with the Container or SizedBox to write the dead height.

   Column(
     children: <Widget>[
       SizedBox(
        height: 400, // fixed height
       child: ListView(...),
      ),
    ],
   )
   

This is fine, but if the height needs to be adaptive, it will not work if you write it.

2. Solution two: shrinkWrap: true

   Try shrinkWrap: true with physics: ScrollPhysics() for scrolling

   shrinkWrap: true is a bit like in android's wrap_content.

   ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      physics: ScrollPhysics()
   ...
   

However, after compiling, you will find a long yellow warning at the bottom of the page.

So still can't

3. Solution three: Expanded or Flexible

   Flexible Is a flexible layout in flutter, equivalent to LinearLayout in android.

   There is one in Flexible flex The attribute, equal to layout_weight, takes up all the remaining space.

   So, we can wrap the ListView with Flexible.

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

This answer based :Vertical viewport was given unbounded height.

Answer 3

test this one for second listview

ListView.builder(
            physics: NeverScrollableScrollPhysics(),

Answer 4

So, everyone posted answers but no one cared to explain why: I'll copy the documentation about shrinkWrap:

Whether the extent of the scroll view in the [scrollDirection] should be determined by the contents being viewed.

If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size in the [scrollDirection]. If the scroll view has unbounded constraints in the [scrollDirection], then [shrinkWrap] must be true.

Shrink wrapping the content of the scroll view is significantly more expensive than expanding to the maximum allowed size because the content can expand and contract during scrolling, which means the size of the scroll view needs to be recomputed whenever the scroll position changes.

Defaults to false.

So, taking the vocabulary of the docs, what's happening here is that our ListView is in a situation of unbounded constraints (in the direction that we are scrolling), thus the ListView will complain that:

... a vertical viewport was given an unlimited amount of vertical space in which to expand.

By simply setting shrinkWrap to true will make sure that it wraps its size defined by the contents. A sample code to illustrate:

// ...
  ListView(
    // Says to the `ListView` that it must wrap its
    // height (if it's vertical) and width (if it's horizontal).
    shrinkWrap: true,
  ),
// ...

That's what is going with your code, nonetheless, @Rémi suggestion is the best for this case, using Align instead of a Column.

Answer 5

There is a widget called Center. It should help you achive what you want to do (center it vertically). Official Documentation for Center widget

Answer 6

Adding this two lines

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...