MCPInstall

flutter-fix-layout-issues

by flutterMobile

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.

Installs
40.2K
Last 24h
+215
Trending rank
#1202
Security
Pass

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads flutter-fix-layout-issues automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill is a purely instructional guide for Flutter developers to resolve common layout constraint errors. It contains no executable code or external connections.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues

SKILL.md

The instructions your agent reads when the skill is triggered.

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 TextField or TextFormField is 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 Row or Column requests 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 ParentDataWidget is not a direct descendant of its required ancestor. (e.g., Expanded outside a Flex, Positioned outside a Stack).
  • "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.

Task Progress

  • 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 "Vertical viewport was given unbounded height": Wrap the scrollable child (ListView, GridView) in an Expanded widget to consume remaining space, or wrap it in a SizedBox to provide an absolute height constraint.
    • If "An InputDecorator...cannot have an unbounded width": Wrap the TextField or TextFormField in an Expanded or Flexible widget.
    • If "RenderFlex overflowed": Constrain the overflowing child by wrapping it in an Expanded widget (to force it to fit) or a Flexible widget (to allow it to be smaller than the allocated space).
    • If "Incorrect use of ParentData widget": Move the ParentDataWidget to be a direct child of its required parent. Ensure Expanded/Flexible are direct children of Row/Column/Flex. Ensure Positioned is a direct child of Stack.
  • Execute Flutter hot reload.
  • Run validator -> review errors -> fix: Inspect the UI to verify the red/grey error screen or yellow/black overflow stripes are resolved. If new layout errors appear, repeat the workflow.

Examples

Fixing Unbounded Height (ListView in Column)

Input (Error State):

// Throws "Vertical viewport was given unbounded height"
Column(
  children: <Widget>[
    const Text('Header'),
    ListView(
      children: const <Widget>[
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
      ],
    ),
  ],
)

Output (Resolved State):

// Wrap ListView in Expanded to constrain its height to the remaining Column space
Column(
  children: <Widget>[
    const Text('Header'),
    Expanded(
      child: ListView(
        children: const <Widget>[
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
        ],
      ),
    ),
  ],
)

Fixing Unbounded Width (TextField in Row)

Input (Error State):

// Throws "An InputDecorator...cannot have an unbounded width"
Row(
  children: [
    const Icon(Icons.search),
    TextField(), 
  ],
)

Output (Resolved State):

// Wrap TextField in Expanded to constrain its width to the remaining Row space
Row(
  children: [
    const Icon(Icons.search),
    Expanded(
      child: TextField(),
    ),
  ],
)

Fixing RenderFlex Overflow

Input (Error State):

// Throws "A RenderFlex overflowed by X pixels on the right"
Row(
  children: [
    const Icon(Icons.info),
    const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
  ],
)

Output (Resolved State):

// Wrap the Text widget in Expanded to force it to wrap within the available constraints
Row(
  children: [
    const Icon(Icons.info),
    Expanded(
      child: const Text('This is a very long text string that will definitely overflow the available screen width and cause a RenderFlex error.'),
    ),
  ],
)

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.

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

Run npx skills add https://github.com/flutter/agent-plugins --skill flutter-fix-layout-issues in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-fix-layout-issues/ (personal) or .claude/skills/flutter-fix-layout-issues/ (project).

Which AI agents can use flutter-fix-layout-issues?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is flutter-fix-layout-issues safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains flutter-fix-layout-issues?

It is published by flutter in flutter/agent-plugins. It has 40,248 recorded installs.

More from flutter/agent-plugins

View all →

flutter-apply-architecture-best-practices

flutter/agent-plugins

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

Code Quality & Workflow43.4K installs

flutter-build-responsive-layout

flutter/agent-plugins

Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

Frontend & Design42.8K installs

flutter-add-widget-test

flutter/agent-plugins

Implement a component-level test using WidgetTester to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.

Testing & QA39.4K installs

flutter-add-integration-test

flutter/agent-plugins

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integrationtest package.

Testing & QA38.4K installs

flutter-setup-declarative-routing

flutter/agent-plugins

Configure MaterialApp.router using a package like gorouter for advanced URL-based navigation. Use when developing web applications or mobile apps that require specific deep linking and browser history support.

Mobile37.9K installs

flutter-implement-json-serialization

flutter/agent-plugins

Create model classes with fromJson and toJson methods using dart:convert. Use when manually mapping JSON keys to class properties for simple data structures.

Mobile37.6K installs

Popular mobile skills

View category →

design-mobile-apps

designed-by-ai/skills

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

Mobile1.1M installs

ios-design

uizze.sh

Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

Mobile416.5K installs

vercel-react-native-skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

OfficialMobile256.7K installs

animate-expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

Mobile140.1K installs

xcode-project-setup

firebase/agent-skills

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

OfficialMobile131.2K installs

firebase-remote-config-basics

firebase/agent-skills

Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.

OfficialMobile121.7K installs