flutter-fix-layout-issues — Skills

What it does

Constraint Violation Diagnostics

Layout Error Resolution Workflow

[ ] Run the application in debug mode to capture the exact layout exception in the console.

[ ] Identify the primary error message (ignore cascading "RenderBox was not laid out" errors).

[ ] Apply the conditional fix based on the specific error type:

If "An InputDecorator...cannot have an unbounded width": Wrap the TextField or TextFormField in an Expanded or Flexible widget.

[ ] Execute Flutter hot reload.

flutter fix layout issues

Source

Repository: https://github.com/flutter/skills

flutter-fix-layout-issues FAQ

What does the flutter-fix-layout-issues skill do?

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. Constraint Violation Diagnostics Layout Error Resolution Workflow

How do I install flutter-fix-layout-issues?

Run: npx -y skills add https://github.com/flutter/skills --skill flutter-fix-layout-issues --agent claude-code — the source lives at github.com/flutter/skills.

Maintain flutter-fix-layout-issues?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![flutter-fix-layout-issues on getagentictools](https://getagentictools.com/badge/skills/flutter-skills-flutter-fix-layout-issues.svg)](https://getagentictools.com/skills/flutter-skills-flutter-fix-layout-issues?ref=badge)

npx agentictools info skills/flutter-skills-flutter-fix-layout-issues

The second line is the CLI lookup for this page — handy in READMEs and docs.