English is currently available.
Dart DISCUSSION
I placed a header Text and a ListView.builder with my sensor readings inside a Column. Flutter throws "Vertical viewport was given unbounded height" and nothing is drawn. The same ListView works when it is the only child of the Scaffold body.
What does the error mean in terms of Flutter's layout rules, and which of the usual fixes (Expanded, SizedBox, shrinkWrap) is the right one?
Flutter layout works by passing constraints down and sizes up: a parent tells each child the minimum and maximum size it may take, the child picks a size within that, and the parent positions it. A Column lays out its non-flexible children with an unbounded maximum height, meaning "be as tall as you like", so that it can add up their heights.
A ListView scrolling vertically wants to fill all the height it is offered. Offered infinity, it cannot choose a size, and that is the error. As the body of a Scaffold it received a finite height, the screen area, so it worked.
The usual fix is Expanded(child: ListView.builder(...)). Expanded makes the Column lay out the fixed children first and then give the list exactly the space that is left, as a bounded constraint. The header stays put and the list scrolls underneath it.
If the list should have a fixed height instead, wrap it in SizedBox(height: 200, child: ...). Both give the viewport a finite height, which is all it needs.
shrinkWrap: true also removes the error, by making the list as tall as its contents, but it has a cost. A normal ListView.builder builds only the items in and near the visible area: with 1,000 rows of 56 pixels on a screen about 800 pixels tall, about 14 rows fit and only those plus a small cache area around them exist at a time.
A shrink-wrapped list inside an unbounded parent becomes 56,000 pixels tall, so all 1,000 items are built and laid out at once. Keep shrinkWrap for short lists of known small size, usually together with physics: NeverScrollableScrollPhysics() when an outer scroll view does the scrolling.
If the whole page, header included, should scroll as one, do not nest a ListView in a scrolling Column at all. Either make the header the first item of the list (itemCount: readings.length + 1 and return the header for index 0), or use a CustomScrollView with a SliverToBoxAdapter for the header and a SliverList for the rows. Both keep lazy building.
The mirror-image error comes from the same rule: Expanded inside a Column that is itself inside a SingleChildScrollView fails, because the scroll view gives the Column unbounded height and there is no "remaining space" to divide.
Back to Dart community
