DEV Community

Cover image for How to Solve Vertical Viewport Was Given Unbounded Height In Flutter?
Pankaj Das
Pankaj Das

Posted on • Originally published at flutteragency.com

How to Solve Vertical Viewport Was Given Unbounded Height In Flutter?

ListView Widget is one of the important widget types that can be used anywhere and basically used to bind data in a list. So in this article, we will go through how to solve vertical viewport was given unbounded height in Flutter.

How to Solve Vertical Viewport Was Given Unbounded Height in Flutter?
Adding these two lines:

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...
)
Enter fullscreen mode Exit fullscreen mode

This generally happens when you try to use a ListView/GridView Widget inside a Column Widget, there are many ways of solving it.

Wrap ListView in Expanded

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

Wrap ListView in SizedBox and give a bounded height

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

Use shrinkWrap: true in ListView Widget like a below.

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true, // use this
    ),
  ],
)
Enter fullscreen mode Exit fullscreen mode
ListView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          children: const [
            Card(
              child: ListTile(
                title: Text('January'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('February'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('March'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('April'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('May'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('June'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('July'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('August'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('September'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('October'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('November'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('December'),
              ),
            ),
          ],
        ),
Enter fullscreen mode Exit fullscreen mode

Output

What is shrinkWrap In Flutter ??
As the official document states

” 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

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,
  ),
// ...
You can also put GridView inside Flexible or Expanded Widget

return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
         Flexible(
          child:  GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
             child: new CellWidget(),
          );
        }),))]
    )
)
Enter fullscreen mode Exit fullscreen mode

Users can also set GridView Widget has ShrinkWrap property/named parameter, to set it true my problem is fixed.

GridView.count(
  shrinkWrap: true,
  // rest of code
)
If you want scrolling functionality, you can add physics property:
ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    physics: ScrollPhysics(),
...
)
MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MyApp'),
        ),
        body: GridView.count(
          shrinkWrap: true,
          crossAxisCount: 2,
          children: List.generate(50, (index) {
            return Center(
              child: Text(
                'Data $index',
                style: Theme.of(context).textTheme.headline5,
              ),
            );
          }),
        ),
      ),
    );
Enter fullscreen mode Exit fullscreen mode

Output

Conclusion:
Thanks for being with us on a Flutter Journey !!!

Thanks for Reading !!!

Do share your valuable suggestions/feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Discussion (0)