flutter-fix-layout-issues 是做什么的?
使用Dart和Flutter MCP工具修复Flutter布局错误(溢出、无界约束)。适用于处理“RenderFlex溢出”、“垂直视口被赋予无界高度”或类似的布局问题。
用法
当您遇到Flutter布局错误时,AI代理将自动检测并应用修复。常见错误包括:
- RenderFlex溢出:通常由
Row或Column的子小部件超出可用空间导致。修复方法包括使用Expanded、Flexible或设置overflow属性。 - 垂直视口被赋予无界高度:通常发生在
ListView、Column或CustomScrollView未正确约束高度时。修复方法包括使用SizedBox、ConstrainedBox或Expanded提供明确的高度约束。 - 水平视口被赋予无界宽度:类似上述问题,但针对水平方向。
工作原理
- 捕获错误消息和堆栈跟踪。
- 识别有问题的Flutter小部件和约束。
- 建议或自动应用标准修复模式(如包裹在
Expanded中、设置mainAxisSize、添加flex等)。 - 验证修复是否解决了原始错误。
支持的平台
- Claude Code
- Cursor
- Codex
- 其他兼容MCP的AI编码代理
示例
问题: RenderFlex溢出了5.0像素
AI代理操作: 检测到Row中的溢出,将溢出的Text小部件包裹在Flexible中,或者调整父Row的mainAxisSize。
问题: 垂直视口被赋予无界高度
AI代理操作: 识别到Column直接作为ListView的子项,将Column包裹在SizedBox中,或者将ListView的shrinkWrap设置为true。