Unbounded height / width | Decoding Flutter
Why Stack Overflow recommends it
Stack Overflow users link it when answering Flutter questions where a ListView or other infinite-size widget inside a Column or Row fails to render or throws an unbounded height or width error.
Recommended by 3 people across 9 different months, 2021 to 2024.
What it is
A 5-minute episode of the Flutter team's Decoding Flutter series that explains why Flutter throws errors like "Viewport was given unbounded height", for example when a ListView sits inside a Column. It walks through how layout constraints work and how to fix the error, and is presented by the official Flutter channel.
What people said
Strong rec Md. Yeasin Sheikh · 2023-01 · Stack Overflow · on “How can I show the ListTiles in a ListView”
Wrap your ListView with Expanded widget. class daily extends StatelessWidget { const daily({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Column( children: [ Expanded( child: ListView.builder( itemCount: sortplayer.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(sortplayer.keys.elementAt(index).toString()), ); }, ), ) ], ); } } I will highly recommend checking this video [this video]
Recommends Md. Yeasin Sheikh · 2021-07 · Stack Overflow · on “Horizontal viewport was given unbounded height - Flutter”
This error happen when we use infinite sized widget inside one-another, here you are using Column inside ListView , both take infinite height, if you wrap Column fixed sized widget it will solve the problem, And I strongly suggest you to watch this video by flutter [this video] on howItWorks.dart @override Widget build(BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Flexible( flex: 5, child: Container( height: 250, child: PageView.builder( // this throws the exception. controller: _pageController, // physics: BouncingScrollPhysics(), scrollDirection: Axis.horizontal, itemCount: _pages.length, onPageChanged: _onchanged, itemBuilder: (context, int index) {
Recommends Carlos Sandoval · 2022-02 · Stack Overflow · on “Dart Flutter throw FlutterError.fromParts(<DiagnosticsNode>[ error”
You are creating a Listview.builder inside a column without specifying the height for the listview. Check this video from flutter team explaining this. [this video] short story: you should use a SizedBox to give Listview.build a height.
Recommends Carlos Sandoval · 2022-02 · Stack Overflow · on “ListView taking all the vertical space”
Listview is expected to take all the possible height given by its parent. So if you expect to have a Listview with finite height you should create a SizedBox() with specific height and make Listview its child. Here is a youtube video from Flutter team explaining this: [this video] [LINK]
Recommends Md. Yeasin Sheikh · 2022-05 · Stack Overflow · on “Why aren't my apps showing anything after i added list tile”
The issue is coming after adding ListView inside Column widget. You can wrap ListView with Expanded . Expanded( child: ListView( children: const <Widget>[ ... I will encourage you to check Unbounded height / width | Decoding Flutter [this video] .
Recommends Md. Yeasin Sheikh · 2022-06 · Stack Overflow · on “How to create a Flutter horizontal list with images and show data, changing selected item color while allowing only one item to be selected at a time?”
You need to provide height while using horizontal listView. A great video about Unbounded height / width | Decoding Flutter [this video] You can play with this widget. class MyApp extends StatefulWidget { MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { int? _selectedIndex; // if you want to provide default selection, init here @override Widget build(BuildContext context) { return Scaffold( body: Column( children: [ SizedBox( height: 30, ), //top level space SizedBox( height: 68, // play with height child: ListView.builder( itemCount: 33, //number of item you like show scrollDirection: Axis.horizontal, itemBuild
Recommends Md. Yeasin Sheikh · 2022-06 · Stack Overflow · on “BoxConstraints forces an infinite width Flutter”
The issue rise using ListTile inside horizontal list, on listView parent you are using width:200 and it can be set on ListTile width. You can wrap Card or ListTile with a sized widget by providing width, and it will solve the issue. itemBuilder: (context, index) { return SizedBox( width: 200, child: Card( child: ListTile( I will encourage you to check LayoutBuilder [LINK] for using sizes and ui/layout [LINK] Check this video [this video] to learn more about Unbounded height/ width.
Recommends Md. Yeasin Sheikh · 2022-07 · Stack Overflow · on “RenderBox was not laid out: RenderRepaintBoundary#09022 relayoutBoundary”
Wrap your ListView.builder with Expanded widget. Expanded( child: ListView.builder( padding: EdgeInsets.all(5), I will recommend to check this video [this video]
Recommends Md. Yeasin Sheikh · 2022-07 · Stack Overflow · on “Make Listeview work nested inside of column inside of a container in flutter”
It would be better using LayoutBuilder to get parent constraints and size the inner elements. Also You need to wrap with Expaned to get available spaces for infinite size widget. I will highly recommend to check this video from Flutter [this video] . Changes are made class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Dialog', debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text('Welcome to Flutter'), ), body: Center( child: Column( children: [ MaCard(mitarbeiterName: "Name"), Expanded( //here child: CustomDialogBoxRow( title: "Sturmtruppler", descriptions: "wird
Recommends Md. Yeasin Sheikh · 2022-09 · Stack Overflow · on “How to solve Flutter TextField exception?”
Wrap your Column with Expanded to get available space inside Row. body: Row( children: [ Expanded( child: Column( children: [ TextField(), ], ), ) ], ) You can check unbounded-height/width video [this video]