- name
- flutter-fix-layout-issues
- description
- Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.
- metadata
- model: models/gemini-3.1-pro-preview last_modified: Tue, 21 Apr 2026 19:45:59 GMT
Resolving Flutter Layout Errors
Contents
Constraint Violation Diagnostics
Flutter layout operates on a strict rule: Constraints go down. Sizes go up. Parent sets position. Layout errors occur when this negotiation fails, typically due to unbounded constraints or unconstrained children.
Diagnose layout failures using the following error signatures:
- "Vertical viewport was given unbounded height": Triggered when a scrollable widget (
ListView,GridView) is placed inside an unconstrained vertical parent (Column). The parent provides infinite height, and the child attempts to expand infinitely. - "An InputDecorator...cannot have an unbounded width": Triggered when a
TextFieldorTextFormFieldis placed inside an unconstrained horizontal parent (Row). The text field attempts to determine its width based on infinite available space. - "RenderFlex overflowed": Triggered when a child of a
RoworColumnrequests a size larger than the parent's allocated constraints. Visually indicated by yellow and black warning stripes. - "Incorrect use of ParentData widget": Triggered when a
ParentDataWidgetis not a direct descendant of its required ancestor. (e.g.,Expandedoutside aFlex,Positionedoutside aStack). - "RenderBox was not laid out": A cascading side-effect error. Ignore this and look further up the stack trace for the primary constraint violation (usually an unbounded height/width error).
Layout Error Resolution Workflow
Copy and use this checklist to systematically resolve layout constraint violations.