close

[Solved] Flutter Error: Vertical viewport was given unbounded height

Hello Guys How are you all? Hope You all are fine. When I run my flutter app it show Flutter Error: Vertical viewport was given unbounded height. So today Here I come with all possible solutions for this error.

We are providing you all possible solutions to solve this error. let’s start this article without wasting your time.

How Flutter Error: Vertical viewport was given unbounded height Occurs ?

I am using GridView in my app But I am Getting flutter exception as given below.

Here Is My Code

 children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]

Here Is My Exception :

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.

How to solve flutter error: Vertical viewport was given unbounded height ?

  1. How to solve flutter error: Vertical viewport was given unbounded height ?

    This error generally happens when you are trying to use a ListView Or GridView inside a Column. To resolve this error Just Wrap listView inside Expanded Widget will solve your error Or Try another given solution.

  2. flutter error: Vertical viewport was given unbounded height

    This error generally happens when you are trying to use a ListView Or GridView inside a Column. To resolve this error Just Wrap listView inside Expanded Widget will solve your error Or Try another given solution.

Solution 1 : Use shrinkWrap: true in ListView.

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

Solution 2 : Wrap ListView in SizedBox and give a bounded height

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

Solution 3 : Wrap ListView in Expanded

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

Solution 4 : Give scrollDirection And shrinkWrap

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

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

Leave a Comment

%d bloggers like this: