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

• General

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

[videopress tbGZVQhF]

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 Guide, Flutter Projects, Code libs and etc.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.