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

· 4 min read
How to Solve Vertical Viewport Was Given Unbounded Height In Flutter
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,
...
)

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(...),
        ),
      ],
    )
  • Wrap ListView in SizedBox and give a bounded height
    Column(
      children: <Widget>[
        SizedBox(
          height: 400, // fixed height
          child: ListView(...),
        ),
      ],
    )
  • Use shrinkWrap: true in ListView Widget like a below.
    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use this
        ),
      ],
    )
    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'),
                  ),
                ),
              ],
            ),
    

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(),
          );
        }),))]
    )
)
  • 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,
                  ),
                );
              }),
            ),
          ),
        );
    

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 GuideFlutter ProjectsCode libs and etc.

Leave a Reply