Vertical viewport was given unbounded height

This is my code:

```dart
@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)



[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
),
],
)

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


[Official Documentation for Center widget]:

[To see links please register here]

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`.

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
)

Although `shrinkWrap` do the thing, but you can't scroll in `ListView`.

If you want scrolling functionality, you can add `physics` property:

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

test this one for second listview

ListView.builder(
physics: NeverScrollableScrollPhysics(),

Container(
height: 100,
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return Text("Hello World $index");
},
),
);

I wanted to post another answer because many answers (including the accepted one!) suggest using `shrinkWrap: true` in `ListView.builder`. While this removes the error, this solution is [**NOT** ideal for performance reasons][1] for this case. Flutter designed `ListView` with infinite size specifically to discourage this behaviour only when necessary!

> 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.

In some cases/devices, this property caused glitchy scrolls and animation lag in my projects. Even if the lag isn't noticeable, this property does hinder scroll performance.

The OP shows that he is creating a **small (finite) number of children** for `ListView`. If we want to resolve the error for these lists, Google [recommends][2] using a `Flexible` widget, i.e. `Expanded` (a `Flexible` with flex 1) on the list itself.

```
Expanded(
child: ListView(
...
),
)
```

There are other layout issues here, but the vertical viewport unbounded height is because the `ListView` doesn't have a parent that bounds its size.

[1]:

[To see links please register here]

[2]:

[To see links please register here]

If you still face this problem in 2021 ..here is the best and easy solution

ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
// itemExtent: 400, use this if you give hight of your items
physics: ScrollPhysics(),)

> their are many solution .. but they have problem.. like when we use ListView and use its property shrinkWrap .then one thing you many notice the scroll does not work on listView so you must use physics: ScrollPhysics()