Vertical viewport was given unbounded height

Question

I am new to flutter. Just have to center my Grid view:

Below is the Code I tried:

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
       mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]
      )
    );
  }

Exception as follows:

    I/flutter ( 9925): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925): 
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9)

Thanks in advance!

Answer 1

Don't use Column for single child alignment. Use Align instead.

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )

Answer 2

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 3

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 4

Adding this two lines

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

Answer 5

This situation typically happens when a scrollable widget is nested inside another scrollable widget.

In my case i use GridView inside of Column and that error throws.

GridView widget has shrinkWrap property/named parameter, to set it true my problem is fixed.

GridView.count(
  shrinkWrap: true,
  // rest of code
)

Answer 6

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