# Flutter: “RenderBox was not laid out”
> Flutter says RenderBox was not laid out, often with Vertical viewport was given unbounded height. Fix a ListView in a Column or a TextField in a Row.
Canonical: https://app369.com/fix/flutter-renderbox-was-not-laid-out/
Last updated: 2026-11-07
The screen goes blank or grey and the console fills with RenderBox was not laid out. That message is usually a follow-on error. Scroll up in the log to the first error: most often Vertical viewport was given unbounded height (a ListView inside a Column) or An InputDecorator cannot have an unbounded width (a TextField inside a Row).
**Short answer**
Find the first layout error above it in the console and give that widget a size. A ListView or GridView inside a Column needs Expanded, Flexible or a SizedBox with a height. A TextField inside a Row needs Expanded or a SizedBox with a width. A nested list inside another scroll view can use shrinkWrap: true with NeverScrollableScrollPhysics for short lists.
## **What the first error is, and the fix**
1. 01 ### **It is a side effect: find the first error**
> “While this error is pretty common, it's often a side effect of a primary error occurring earlier in the rendering pipeline.” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) RenderBox was not laid out repeats for every widget that could not be sized after something above it failed. Clear the console, reload the screen and read the first assertion. That one names the widget to fix.
2. 02 ### **A ListView inside a Column**
> “To make it as tall as the remaining space in the Column, wrap it using an Expanded widget (as shown in the following example).” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) A ListView takes all the height it is offered, and a Column offers unlimited height, so neither can decide. Wrap the ListView in Expanded to fill the rest of the screen, or give it a fixed height with SizedBox.```
Column(
children: [
const Text('Header'),
Expanded(
child: ListView(children: items),
),
],
)
```
3. 03 ### **A TextField inside a Row**
> “As suggested by the error message, fix this error by constraining the text field using either an Expanded or SizedBox widget.” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) A TextField wants to be as wide as possible, and a Row offers unlimited width. Wrap the field in Expanded so it takes the space next to a button, or in a SizedBox with a width.```
Row(
children: [
Expanded(child: TextField(controller: controller)),
IconButton(icon: const Icon(Icons.send), onPressed: send),
],
)
```
4. 04 ### **A scroll view inside another scroll view**
> “The error is often caused when a ListView (or other kinds of scrollable widgets such as GridView) is placed inside a Column.” [**Flutter, Common Flutter errors**](https://docs.flutter.dev/testing/common-errors) A ListView inside a SingleChildScrollView or another ListView has the same problem. For a short inner list, set shrinkWrap: true and physics: NeverScrollableScrollPhysics() so the outer view scrolls. For long lists, use one CustomScrollView with slivers, because shrinkWrap builds every item at once.
Checked against the vendor’s docs on November 7, 2026: [Flutter docs: Common Flutter errors (RenderBox was not laid out, unbounded height and width)](https://docs.flutter.dev/testing/common-errors).
## **Rather hand it over?**
Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.
- [from $450**App Fix Ticket**One reproducible bug in an existing mobile or web app, diagnosed and fixed.**See scope and start**](https://app369.com/fixed-price/flutter-firebase-bug-fix/)
- [from $450**AI-Built App Rescue**A Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.****No issues worth fixing, no charge.**** If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.**See scope and start**](https://app369.com/fixed-price/ai-app-rescue/)
Related: [**Flutter “A RenderFlex overflowed”**](https://app369.com/fix/flutter-renderflex-overflowed/) · [**Flutter “setState() called during build”**](https://app369.com/fix/flutter-setstate-called-during-build/) · [**Flutter Gradle task assembleDebug failed**](https://app369.com/fix/flutter-gradle-assembledebug-failed/) · [**Flutter requires a newer Kotlin Gradle plugin**](https://app369.com/fix/flutter-kotlin-gradle-plugin-version/)
Questions
## **More on this error**
**Why is the screen grey in release but red in debug? **+
In debug, a build error shows the red error screen. In release the error widget is a plain grey box. The cause is the same layout error.
**Is shrinkWrap: true always the fix? **+
Only for short lists. It makes the list measure all its items up front, which gets slow for long or endless lists. Expanded, a fixed height, or slivers are better there.
**Can you fix it for me? **+
If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.
A different error?
## **Describe it and get a written quote**
Send the error and what you were doing. You get a written scope, a fixed price and a timeline; Simon replies by email, usually within one business day.
[**Describe your problem **→](https://app369.com/contact/) [**All fixes**](https://app369.com/fix/)