flutter-fix-layout-issues Skill for Claude Code: Fix Flutter Layout Errors

Makes Claude fix Flutter layout errors like "RenderFlex overflowed" and unbounded height by finding the real error and wrapping the right widget.

Installs: 41.1K; on skills.sh
Stars: 3.1K; on GitHub
Updated: Nov 2026; last repo commit

flutter-fix-layout-issues teaches Claude the core Flutter layout rule: constraints go down, sizes go up, and the parent sets position. Claude runs the app in debug mode to capture the exact exception, ignores the follow-on "RenderBox was not laid out" error, and finds the primary one.

Then it applies the matching fix. A scrollable in a Column gets an Expanded or SizedBox, a TextField in a Row gets an Expanded or Flexible, an overflowing child gets an Expanded or Flexible, and a misplaced ParentData widget moves under its required parent. It hot reloads and checks that the error is gone.

Good for

Flutter developers staring at yellow and black overflow stripes
Anyone who put a ListView in a Column or a TextField in a Row and got an exception
Developers who want Claude to apply the standard constraint fixes

Install flutter-fix-layout-issues

Claude Code

Copy this prompt.

Install the flutter-fix-layout-issues skill in Claude Code. Run this command:

npx skills add https://github.com/flutter/agent-plugins --skill flutter-fix-layout-issues

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Contents
Constraint Violation Diagnostics
Layout Error Resolution Workflow
Task Progress
Examples
Fixing Unbounded Height (ListView in Column)
Fixing Unbounded Width (TextField in Row)
Fixing RenderFlex Overflow

Key facts

Author: The Flutter team (README: "maintained by the Flutter team")
License: BSD-3-Clause
Installs on skills.sh: 41,090 as of 2026-11-02
GitHub stars: 3,136 for the whole flutter/agent-plugins repo, 2026-11-02
Last repo commit: 2026-11-01
What is inside: 1 file: SKILL.md. No scripts.
Part of: The dart-flutter plugin in flutter/agent-plugins, which bundles skills, MCP server configuration and rules
Needs: A running Flutter app in debug mode to capture the layout exception

What it includes

Five error messages and what causes each
Unbounded height, unbounded width in an InputDecorator, RenderFlex overflowed, incorrect use of ParentData widget, and the cascading RenderBox was not laid out.
Read · Constraint diagnostics
Capture the error, find the primary one, apply the fix, hot reload, re-check
A checklist ending with inspecting the UI for the red or grey error screen or overflow stripes, and repeating if new errors appear.
Try: “Fix the overflow error on the profile page when the keyboard is visible”
Runs code · Resolution workflow
Wrap the scrollable in Expanded, or give it a SizedBox
Example with the before and after code.
Write · Fix: ListView in a Column
Wrap the field in Expanded or Flexible
Example with the before and after code.
Write · Fix: TextField in a Row
Wrap the long child in Expanded to make text wrap
Example with a long Text next to an Icon.
Write · Fix: RenderFlex overflow

From the official docs

Permissions

Low risk

Claude edits your Dart widget code and runs the app in debug mode. Work on a branch and read the diff before you commit.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your widgets and runs the app
Claude changes widget code and runs the app in debug mode to read the exception. Work on a branch and read the diff before you commit. github.com
The repo's plugin adds a local MCP server
The skill folder is one SKILL.md. The repo's dart-flutter Claude plugin (plugin.json, version 1.0.7) also registers an MCP server that runs `dart mcp-server` on your machine with AGENT_PLUGIN=claude-code in its environment. Review it before you enable the plugin. github.com

Technical details

Sign-in and keys	SKILL.md names no account or API key.
Scopes	Edits Dart widget code Runs the app in debug mode and hot reloads it

Questions

What does flutter-fix-layout-issues do?

It makes Claude fix Flutter layout errors. It reads the exception, finds the primary constraint problem and wraps the right widget in Expanded, Flexible or SizedBox.

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

Use the install box at the top of this page for this one skill. The Flutter README also points to Flutter's AI setup guide for installing the plugins for your agent.

Does it need the Flutter or Dart MCP server?

SKILL.md names none. Its description says it fixes errors "using Dart and Flutter MCP tools", but its steps only say to run the app in debug mode, read the exception and run Flutter hot reload. The Dart MCP server comes from the repo's dart-flutter Claude plugin: its manifest (.claude-plugin/plugin.json, version 1.0.7) declares a server called dart-mcp-server that runs dart mcp-server, and the repo's flutter-hot-reload rule names its hot_reload and hot_restart tools. Installing only this skill folder does not add that server.

Which errors does it handle?

Unbounded height from a scrollable in a Column, unbounded width from a TextField in a Row, RenderFlex overflow, and incorrect use of ParentData widgets such as Expanded outside a Flex or Positioned outside a Stack.

Why does it ignore "RenderBox was not laid out"?

SKILL.md calls it a cascading side effect. The skill tells Claude to look further up the stack trace for the primary constraint error.

Is flutter-fix-layout-issues safe?

It is one instruction file with no scripts. Claude edits your Dart widgets and runs the app in debug mode, so work on a branch and read the diff.

Does it work in Codex, Cursor or the Claude app?

The Flutter README describes installing the plugins for "your preferred agent" through Flutter's docs and names no specific agents. It does not document the Claude app.

Information

updated Nov 2, 2026

Repository: flutter/agent-plugins
Folder: skills/flutter-fix-layout-issues

flutter/agent-plugins skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

flutter-fix-layout-issues SKILL.md · github.com
flutter/agent-plugins README · github.com
dart-flutter plugin.json · github.com
flutter-hot-reload rule · github.com