My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
How to Solve Vertical Viewport Was Given Unbounded Height In Flutter?

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

Ruben Gray's photo
Ruben Gray
·Jan 12, 2022·

3 min read

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

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.