/ 目录 / 演练场 / mcp_flutter
● 社区 Arenukvern ⚡ 即开即用

mcp_flutter

作者 Arenukvern · Arenukvern/mcp_flutter

让 Claude(或 Cursor)检查你的 Flutter 应用 —— 错误、截图、widget 树 —— 通过 Dart VM service,并支持你在应用中动态注册的自定义工具。

mcp_flutter 配对了一个 MCP server 和一个在你 Flutter 应用 debug 模式下运行的 mcp_toolkit Dart 包。它们共同将应用错误、截图、视图细节以及运行时注册的自定义工具暴露给 AI 编码助手。

为什么要用

核心特性

实时演示

实际使用效果

flutter.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "flutter": {
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "flutter",
      "command": "TODO",
      "args": [
        "See README: https://github.com/Arenukvern/mcp_flutter"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "flutter": {
      "command": {
        "path": "TODO",
        "args": [
          "See README: https://github.com/Arenukvern/mcp_flutter"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add flutter -- TODO 'See README: https://github.com/Arenukvern/mcp_flutter'

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: mcp_flutter

使用 AI 的眼睛调试运行中的 Flutter 渲染错误

👤 Flutter 开发者 ⏱ ~15 min intermediate

何时使用: 你在迭代 UI 时出错了。与其描述,不如让 AI 看到截图和错误。

前置条件
  • 带有 mcp_toolkit 包的 Flutter 应用 — 添加到 pubspec.yaml 并在 main() 中初始化
  • 在 debug 模式下运行 — flutter run —— server 连接到 Dart VM service
步骤
  1. 连接
    通过 mcp_flutter 连接到我运行中的 Flutter 应用(VM 端口 8181)。✓ 已复制
    → 工具列表现在包含 get_app_errors、view_screenshot
  2. 捕获状态
    获取当前视图的截图。同时检查最后 60 秒内的任何错误。✓ 已复制
    → 截图 + 错误日志
  3. 建议修复
    基于这个错误和截图,哪里出了问题,我该如何修复?✓ 已复制
    → 代码 diff 建议

结果: 紧凑的调试循环,AI 可以通过查看下一张截图验证每个修复。

注意事项
  • 截图工具默认禁用 — 使用 --images 标志启动 server
  • 运行多个应用时 VM 端口冲突 — 为每个应用指定 --vm-service-port;默认为 8181

将你的应用的测试工具暴露为 MCP 工具

👤 构建 QA 工作流的 Flutter 开发者 ⏱ ~30 min intermediate

何时使用: 你的应用有仅用于 debug 的 seeder / 状态切换,你希望 AI 在开发时调用它们。

步骤
  1. 在 Dart 中注册工具
    使用 mcp_toolkit,在我应用的 debug 初始化器中注册工具 seed_users(count: int)set_feature_flag(name: str, value: bool)✓ 已复制
    → 注册工具的 Dart 代码片段
  2. 从 Claude 驱动
    创建 10 个用户,将 'new_checkout' 特性开关翻转为 true,获取结账界面的截图。✓ 已复制
    → 包含最终截图的多步工具调用序列

结果: 通过聊天驱动的状态操作加快手动 QA。

注意事项
  • 工具意外地发布到 release 模式 — 使用 kDebugMode 限制注册 —— release 构建看不到它们

理解混乱的 widget 树

👤 继承他人代码的 Flutter 开发者 ⏱ ~20 min intermediate

何时使用: 你试图理解为什么屏幕以某种方式渲染,而代码有 8 层嵌套的 Builder。

步骤
  1. 获取视图详情
    获取当前屏幕的 get_view_details 并总结 widget 层次结构。✓ 已复制
    → Widget 树摘要
  2. 询问原因
    为什么这个文本溢出?参考树中的具体 widget。✓ 已复制
    → 基于实际树的布局推理

结果: 更快地融入陌生的 Flutter 代码。

注意事项
  • 大型 widget 树会消耗大量 token — 先请求深度限制的摘要,然后深入钻取

组合

与其他 MCP 搭配,撬动十倍杠杆

flutter + git-2

调试 → 修复 → 提交循环

获取截图,诊断,让我应用修复,然后 git_commit,并附上描述修复的消息。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
get_app_errors since?: int (seconds) 在运行中的应用中触发 bug 之后 free
view_screenshot 视觉验证;需要 --images 标志 tokens per image
get_view_details 理解布局 / 屏幕几何 free
<custom> Varies per app registration 通过 mcp_toolkit 注册的任何工具 free

成本与限制

运行它的成本

API 配额
每次调用 Token 数
截图较大(约 1-3k vision tokens);widget 树 500-5k
费用
免费,MIT
提示
调试非视觉问题时禁用截图(移除 --images)—— widget 树 + 错误便宜得多。

安全

权限、密钥、影响范围

凭据存储: 无 —— 连接到本地 Dart VM service
数据出站: 通常仅限本地;截图发送到你的 LLM 提供商
切勿授予: 在 release 构建中将 VM service 端口暴露到网络

故障排查

常见错误与修复

无法连接到 Dart VM

首先启动你的 Flutter 应用,然后启动 MCP server。确认 VM 端口(通常是 8181)与配置一致。

验证: curl http://127.0.0.1:8181/
截图返回 404

Server 启动时没有 --images 标志。使用该标志重启。

自定义工具没有显示

mcp_toolkit 必须在 runApp 之后初始化;验证你构建中的 kDebugMode 限制不是 false。

替代方案

mcp_flutter 对比其他方案

替代方案何时用它替代权衡
Flutter DevTools MCP你想要官方的 Flutter 工具还不以 MCP 形式存在;这是最接近的

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills