ListView inside listview flutter not scrolling

3 min read

While developing your Flutter app, you may need to include a scrollable widget such as ListView/GridView inside the Column. But when you add such a scrollable widget inside the Column, you get some error message in your console. So in this tutorial, we’ll see how to add ListView inside Column in Flutter.

Nội dung chính Show

What does Error look Like?
1. Using Expanded (Recommended)

Here’s what we’ll cover:

What does Error look Like?

The error message depends upon the following two scenarios:

ListView inside Column with Vertical Scroll Direction
ListView inside Column with Horizontal Scroll Direction

When you try to add the ListView with a vertical scroll inside the Column, you get an error that looks like the below:

Error Message: Vertical viewport was given unbounded height.

When you try to add the ListView with a horizontal scroll inside the Column, you get an error that looks like the below:

Error Message: Horizontal viewport was given unbounded height.

The reason for getting this error is because of adding the ListView 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. Hence it becomes difficult for the Flutter to calculate the size of the ListView.

TLDR: You added one ListView widget DIRECTLY inside the Column.

To add the ListView inside Column in Flutter, there are mainly three ways:

Using Expanded (Recommended)
Using ShrinkWrap
Using SizedBox

1. Using Expanded (Recommended)

You can wrap your ListView widget inside the Expanded widget and this will allow the ListView to take all the available as long as the Column allows.

Note: The main point here is to tell how much tall the ListView will be.

Code Example:

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

Output:

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:

Wrapping your ListView inside the SizedBox widget 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:

In this tutorial, we learned the top 3 ways to add the ListView inside Column in Flutter with practical examples. Basically, we can use the Widgets such as SizededBox or Expanded or simply the shrinkWrap property to include ListView inside Column. We also understood why did you get this error with a practical example.

Would you like to check other interesting Flutter tutorials?