/ 目錄 / 演練場 / mcp_flutter
● 社群 Arenukvern ⚡ 即開即用

mcp_flutter

作者 Arenukvern · Arenukvern/mcp_flutter

讓 Claude(或 Cursor)透過 Dart VM 服務直接檢視你正在執行的 Flutter 應用程式——包括錯誤、截圖、Widget 樹——以及你在應用程式內動態註冊的自訂工具。

mcp_flutter 將一個 MCP 伺服器與 mcp_toolkit Dart 套件配對,後者在 Flutter 應用程式的 debug 模式下運行。兩者共同向 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 — 伺服器會連線至 Dart VM 服務
步驟
  1. 連線
    透過 mcp_flutter 連線至我正在執行的 Flutter 應用程式(VM 埠號 8181)。✓ 已複製
    → 工具清單現在包含 get_app_errors、view_screenshot
  2. 擷取狀態
    對目前畫面截圖,並取出最近 60 秒的所有錯誤。✓ 已複製
    → 截圖加上錯誤日誌
  3. 建議修正方式
    根據這個錯誤和截圖,問題出在哪裡?該如何修正?✓ 已複製
    → 程式碼差異建議

結果: 建立緊湊的排錯迴圈,讓 AI 能透過下一張截圖來驗證每次修正的結果。

注意事項
  • 截圖工具預設未啟用 — 啟動伺服器時加上 --images 旗標
  • 執行多個應用程式時 VM 埠號衝突 — 為每個應用程式指定 --vm-service-port;預設值為 8181

將應用程式的測試輔助功能公開為 MCP 工具

👤 建立 QA 工作流程的 Flutter 開發者 ⏱ ~30 min intermediate

何時使用: 你的應用程式有僅限 debug 模式的資料填充器或狀態切換功能,希望 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 流程。

注意事項
  • 工具意外發布至正式版本 — 使用 kDebugMode 控管工具註冊——正式版本不會看到這些工具

理解令人困惑的 Widget 樹結構

👤 接手他人程式碼的 Flutter 開發者 ⏱ ~20 min intermediate

何時使用: 你試圖理解某個畫面為何如此渲染,但程式碼裡有 8 層巢狀 Builder。

步驟
  1. 取得畫面詳情
    對目前畫面執行 get_view_details,並整理 Widget 層級結構的摘要。✓ 已複製
    → Widget 樹摘要
  2. 詢問原因
    為什麼這段文字會溢出?請參照樹狀結構中的特定 Widget 說明。✓ 已複製
    → 基於實際樹狀結構的版面配置分析

結果: 更快速地上手陌生的 Flutter 程式碼。

注意事項
  • 龐大的 Widget 樹會耗盡 Token 預算 — 先請 AI 提供限定深度的摘要,再逐步深入查看細節

組合

與其他 MCP 搭配,撬動十倍槓桿

flutter + git-2

截圖排錯 → 修正 → 提交的完整迴圈

截圖、診斷問題、讓我套用修正,然後用 git_commit 提交並附上描述此次修正的訊息。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
get_app_errors since?: int (seconds) 在執行中的應用程式觸發錯誤之後呼叫 free
view_screenshot 用於視覺驗證;需要 --images 旗標 tokens per image
get_view_details 了解版面配置或螢幕尺寸資訊 free
<custom> Varies per app registration 呼叫你透過 mcp_toolkit 註冊的任何工具 free

成本與限制

運行它的成本

API 配額
None
每次呼叫 Token 數
截圖較大(約 1-3k 視覺 Token);Widget 樹約 500-5k
費用
Free, MIT
提示
排查非視覺性問題時,停用截圖功能(移除 --images)——Widget 樹加上錯誤資訊消耗的 Token 少得多。

安全

權限、密鑰、影響範圍

憑證儲存: 無——連線至本地端的 Dart VM 服務
資料出站: 一般使用時僅限本地端;截圖會傳送至你的 LLM 服務供應商
切勿授予: Expose VM service port to the network in release builds

故障排查

常見錯誤與修復

Cannot connect to Dart VM

請先啟動 Flutter 應用程式,再啟動 MCP 伺服器。確認 VM 埠號(通常為 8181)與設定相符。

驗證: curl http://127.0.0.1:8181/
Screenshots return 404

伺服器啟動時未加 --images 旗標。請加上該旗標重新啟動。

Custom tools not showing up

mcp_toolkit 必須在 runApp 之後初始化;確認 kDebugMode 條件在你的建置中不為 false。

替代方案

mcp_flutter 對比其他方案

替代方案何時用它替代權衡
Flutter DevTools MCP你希望使用 Flutter 官方工具目前尚不存在對應的 MCP 整合;這是目前最接近的替代方案

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills