Community生产力与协作github.com

flutter/flutter-fix-layout-issues

使用Dart和Flutter MCP工具修复Flutter布局错误(溢出、无界约束)。适用于处理“RenderFlex溢出”、“垂直视口被赋予无界高度”或类似的布局问题。

flutter-fix-layout-issues 是什么?

该技能专门用于诊断和修复Flutter应用中常见的布局错误,如RenderFlex溢出(RenderFlex overflowed)和垂直视口被赋予无界高度(Vertical viewport was given unbounded height)。它利用Dart和Flutter MCP工具,自动分析布局代码并提供修正建议,帮助开发者快速解决由约束冲突、溢出或尺寸不明导致的UI渲染问题。支持在Claude Code、Cursor、Codex等AI编码代理平台上运行,能够解析Flutter小部件树,识别溢出或约束错误的具体位置,然后生成修复后的代码片段。使用此技能可以显著减少手动调试布局的时间,确保界面在各种设备上正确显示。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-fix-layout-issues

Installed? Explore more 生产力与协作 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

flutter-fix-layout-issues 是做什么的?

使用Dart和Flutter MCP工具修复Flutter布局错误(溢出、无界约束)。适用于处理“RenderFlex溢出”、“垂直视口被赋予无界高度”或类似的布局问题。

用法

当您遇到Flutter布局错误时,AI代理将自动检测并应用修复。常见错误包括:

  • RenderFlex溢出:通常由Row或Column的子小部件超出可用空间导致。修复方法包括使用Expanded、Flexible或设置overflow属性。
  • 垂直视口被赋予无界高度:通常发生在ListView、Column或CustomScrollView未正确约束高度时。修复方法包括使用SizedBox、ConstrainedBox或Expanded提供明确的高度约束。
  • 水平视口被赋予无界宽度:类似上述问题,但针对水平方向。

工作原理

  1. 捕获错误消息和堆栈跟踪。
  2. 识别有问题的Flutter小部件和约束。
  3. 建议或自动应用标准修复模式(如包裹在Expanded中、设置mainAxisSize、添加flex等)。
  4. 验证修复是否解决了原始错误。

支持的平台

  • Claude Code
  • Cursor
  • Codex
  • 其他兼容MCP的AI编码代理

示例

问题: RenderFlex溢出了5.0像素

AI代理操作: 检测到Row中的溢出,将溢出的Text小部件包裹在Flexible中,或者调整父Row的mainAxisSize。

问题: 垂直视口被赋予无界高度

AI代理操作: 识别到Column直接作为ListView的子项,将Column包裹在SizedBox中,或者将ListView的shrinkWrap设置为true。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

flutter/flutter-accessibility

Configure your Flutter app to support assistive technologies like Screen Readers

flutter/flutter-accessibility-audit

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.

flutter/flutter-adding-home-screen-widgets

Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.

flutter/flutter-add-integration-test

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 integration_test package.

flutter/flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

flutter/flutter-add-widget-test

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.

flutter/flutter-animating-apps

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.

flutter/flutter-animation

Add animated effects to your Flutter app

flutter/flutter-apply-architecture-best-practices

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

flutter/flutter-app-size

Measure and reduce the size of the Flutter app bundle, APK, or IPA

flutter/flutter-architecting-apps

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

flutter/flutter-architecture

Use the Flutter team's recommended app architecture

flutter/flutter-building-forms

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

flutter/flutter-building-layouts

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

flutter/flutter-building-plugins

Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality.

flutter/flutter-build-responsive-layout

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.

flutter/flutter-caching

Cache data in a Flutter app

flutter/flutter-caching-data

Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup.

flutter/flutter-concurrency

Execute long-running tasks in a background thread in Flutter

flutter/flutter-databases

Work with databases in a Flutter app

相关技能