What is the flutter-fix-layout-issues skill?
Flutter-fix-layout-issues is a skill in the flutter/agent-plugins repository. It gives an AI coding agent a map from Flutter layout error messages, such as RenderFlex overflow and unbounded height, to the fix that applies, plus a checklist and a workflow for confirming the fix.
It is a debugging skill in the flutter/agent-plugins repository. Flutter reports layout problems with long, similar-looking messages. The skill gives the AI coding agent a lookup from the message to the likely cause and the fix, so it does not guess.
Errors it maps to fixes
- Vertical viewport was given unbounded height: wrap the child in Expanded or SizedBox.
- InputDecorator unbounded width: wrap the field in Expanded or Flexible.
- RenderFlex overflowed: wrap the overflowing child in Expanded or Flexible.
- Incorrect use of ParentData widget: fix the parent so the widget sits where it is allowed.
- RenderBox was not laid out: usually a cascade from an earlier error, so ignore it and fix the first one.
What else is in it
The skill adds a checklist and a workflow that uses Dart examples, and it mentions the Dart and Flutter MCP tools for inspecting the running app.
Who the skill is for
Best for
- Flutter developers whose agent keeps patching overflow errors in the wrong place.
- Teams that want the first error in a cascade fixed, not the last.
- Anyone who pastes layout exceptions into an AI coding agent.
Not for
- Designing adaptive layouts from scratch. Use flutter-build-responsive-layout for that.
- React Native styling bugs. See building-native-ui.
- Web CSS layout. See layout.
How to install Flutter Fix Layout Issues
git clone https://github.com/flutter/agent-plugins.gitClone the repository
Run
git clone https://github.com/flutter/agent-plugins.git. The skill is the skills/flutter-fix-layout-issues folder.Copy the skill folder
Copy skills/flutter-fix-layout-issues into your AI coding agent's skills folder.
Open a Flutter project
Start the agent in your Flutter app and reproduce the error.
Paste the exception
Try: fix this layout error, then paste the full message including the widget it names.
Check that it loaded
Paste a RenderFlex overflowed message and check that the agent proposes wrapping the overflowing child in Expanded or Flexible, then reruns the app to confirm the error is gone.
Key features
- Error signature mapEach common layout error is tied to a cause and a fix, so the agent starts from the message instead of a guess.
- Unbounded height fixA viewport given unbounded height is fixed by wrapping the child in Expanded or SizedBox.
- Unbounded width fixAn InputDecorator with unbounded width is fixed by wrapping the field in Expanded or Flexible.
- Overflow fixRenderFlex overflowed is fixed by wrapping the child in Expanded or Flexible.
- ParentData fixIncorrect use of ParentData widget points to the parent as the place to change.
- Cascade awarenessRenderBox was not laid out is treated as a follow-on error, so the agent looks for the first one.
- Checklist and workflowA checklist and a Dart examples workflow help confirm the fix instead of stopping at a plausible edit.
- Tool pointersThe skill mentions Dart and Flutter MCP tools for inspecting the running app.
Frequently asked questions
What is the flutter-fix-layout-issues skill?
It is a skill in the flutter/agent-plugins repository that helps an AI coding agent diagnose Flutter layout exceptions. It maps error messages such as RenderFlex overflowed and unbounded height to the fix, and adds a checklist.
How do I install it?
Clone flutter/agent-plugins and copy the skills/flutter-fix-layout-issues folder into your AI coding agent's skills folder. The README also points to the Flutter documentation for plugin setup if your agent supports it.
Why does Flutter say RenderBox was not laid out?
The skill treats it as a cascade. It usually appears after an earlier layout error, so the agent should ignore it and fix the first error reported, then check whether the later messages disappear.
How does it fix a RenderFlex overflow?
The skill says to wrap the overflowing child in Expanded or Flexible so it shares the available space in the Row or Column instead of demanding more than exists. The agent should then rerun the app to confirm.
What about unbounded height in a list?
For a vertical viewport given unbounded height, the skill says to wrap the child in Expanded or SizedBox so the list receives a finite height from its parent instead of trying to grow without limit.
Is this for building layouts or fixing them?
Fixing. To build adaptive layouts that avoid these errors in the first place, use flutter-build-responsive-layout, which covers breakpoints, constrained content, builder widgets and input support for desktop and web. Use the two together.
Does it need the Dart and Flutter MCP tools?
The skill mentions them as helpers for inspecting the running app, but the error map and checklist are useful on their own. Treat the MCP tools as an optional extra rather than a requirement for the skill to work.