When you include Listview as child widget of Scroll view and a Column or when you try to create a UI that leads you to use gride-layout, you will surely come across “vertical viewport was given unbounded height” Error in flutter. When this happens, you will see some painted lines on the emulator. Why this Error? This error occurs when there is an unbounded height on the parent widget in other words when there’s not enough height. For example, if you have a parent Container that has a height of 200 then a child Container that needs a height of 300 (just for illustration purpose) there will be an error.

Mostly the error occurs when you include a Listview or GrideView inside a Scrollable, Column or Row widget. This makes it cumbersome for Flutter to calculate the size of the ListView because such widgets are meant to take all the available height whiles Rows and Columns does not.

Error Message Example:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical
viewport was given an unlimited amount of vertical space in which to expand. This situation
typically happens when a scrollable widget is nested inside another scrollable widget.
If this widget is always nested in a scrollable widget there is no need to use a viewport because
there will always be enough vertical space for the children. In this case, consider using a Column
instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
the height of the viewport to the sum of the heights of its children.

Below are the various ways to easily solve the above errors.

Solution One: Wrap your ListView() widget with Expanded() Widget:

Expanded(
  child:ListView(
      children: [
          Text(“First child”),
          Text(“second child”)
      ],
  ),
)

Solution Two: Set Shrinkwrap: true on ListVew() Widget:

ListView(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  children: [
        
  ],
)

Using shrinkWrap: true will make the ListView widget to shrink down to it children’s size based on the scroll direction either vertical or horizontal.

Check also, How to solve null check operator used on null value?

Solution Three: Set Bounded Height on Parent Widget using Container():

Container(
  // it will scroll within this container height without causing any error
  height: 600,
  child:ListView(
      children: [
          Text(“First child”),
          Text(“second child”)

      ],
  ),
)

OR set the height of the container based on the device size using MediaQuery.

SizedBox(
  height: MediaQuery.of(context).size.height,
  child:ListView(
      children: [
         Text(“First child”),
         Text(“second child”)
 
      ],
  ),
)

Solution Four: Set Bounded Height on Parent Widget using SizedBox():

Column(
  children: [
    SizedBox(
      height: 400,
      child:ListView(
      children: [
         Text(“First child”),
         Text(“second child”)
 
      ],
     ),
    ),
  ],
)

Wraping a ListView inside a SizeBox widget that has the height property set to some number will give it a limited portion to scroll in instead of infinite size. The SizeBox will have a fixed height and because of that its child will not be given an unbounded height.

Solution Five: Using Flexible() widget:

Column(
  children: <Widget>[
    Flexible( 
      child:ListView(
      children: [
         Text(“First child”),
         Text(“second child”)
 
      ],
     ),
    ),
  ],
)

You can use the Flexible widget in a Row or a Column and it will expand to fill the available space depending on parent widget. For example, if used inside a Column, it will expand to fill the available space in the main axis. Therefore, you could use ListView as a child element of Flexible widget and it will solve the above unbounded height error.

Check also, How to conditionally show widget in flutter?

Conclusion

All the above examples show how to solve ʺVertical viewport was given unbounded heightʺ Error on Flutter. You’ve also seen the cause of the error and how to easily fix and avoid one.