[Easy Fix] Vertical Viewport Was Given Unbounded Height

Flutter lets you combine various widgets to create a user interface that matches your design. Sometimes, you may need to include a scrollable widget inside the Column. For example, ListView inside Column. But while doing so, you get the unbounded height error. Which is a very common error in Fluter. So in this tutorial, we’ll explain why did you get the error called vertical viewport was given unbounded height in Flutter and try to fix it.

Here’s what we’ll cover:

• How’s the Error Looks Like?
• Why Did you Get this Error?
• Ways to Fix Vertical Viewport Was Given Unbounded Height
  1. Using SizedBox
  2. Using ShrinkWrap
  3. Using Expanded (Recommended)

How’s the Error Looks Like?

Here’s how the error looks like when you try to add any scrollable widget (ListView, GridView) inside Column:

Why Did you Get this Error?

You got this error because you have added the ListView or GridView inside the Column without giving proper constraint. By default, The ListView takes all the available space in a vertical direction and the Column widget doesn’t add any constraint on its children’s height. This makes it difficult for the Flutter to calculate the size of ListView.

TLDR: You added one scrollable widget DIRECTLY inside another scrollable widget.

Ways to Fix Vertical Viewport Was Given Unbounded Height

To fix the vertical viewport was given unbounded height error, you can either set the shrinkWrap property of the ListView widget to true or wrap it inside the Expanded/SizedBox widget (with height property).

Using SizedBox

Wrap your ListView widget inside the SizedBox widget. Add the height parameter to the SizedBox and give it a fixed height. This will ensure that the ListView is displayed in a limited portion instead of infinite size.

Code Example:

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

Output:

Using shrinkWrap

If you are not comfortable with wrapping your ListView inside the fixed height, just add the shrinkWrap property to the ListView and set it to True. This will make the ListView widget shrink down to its children’s size.

Code Example:

Column(
  children: [
    ListView(
      shrinkWrap: true,
      children: const <Widget>[...],
    ),
  ],
)

Output:

Using Expanded (Recommended)

The main idea here is to tell, how much tall the ListView will be. So now you can also wrap your ListView widget inside the Expanded widget. This will allow the ListView to take up all the available as long as the Column allows.

Code Example:

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

Output:

That’s it Thanks.

Conclusion

In this tutorial, we learned that to fix the vertical viewport was given unbounded height error, you can use the SizedBox or Expanded widget to wrap the ListView or simply set the shrinkWrap property to true. We also understood why did you get this error with a practical example.

Would you like to check other interesting Flutter tutorials?