Dart 和 Flutter MCP 伺服器

本指南討論了 Dart 和 Flutter MCP 伺服器。

Dart 和 Flutter MCP 伺服器將 Dart 和 Flutter 開發工具的操作暴露給相容的 AI 助手客戶端。MCP（模型上下文協議）是一種支援開發工具與 AI 助手之間通訊的協議，使助手能夠理解程式碼上下文並代表開發者執行操作。

Dart 和 Flutter MCP 伺服器可以與任何支援標準 I/O (stdio) 作為傳輸介質的 MCP 客戶端協同工作。為了訪問 Dart 和 Flutter MCP 伺服器的所有功能，MCP 客戶端必須支援工具 (Tools) 和資源 (Resources)。為了獲得最佳的開發體驗，MCP 客戶端還應支援根目錄 (Roots)。

如果您使用的客戶端聲稱支援根目錄但實際上並未設定，請傳遞 --force-roots-fallback 標誌以啟用用於管理根目錄的工具。

Dart 和 Flutter MCP 伺服器提供了一系列不斷增長的工具，使 AI 助手能夠深入瞭解您的專案。以下是它部分功能的概述：

• 分析並修復專案中程式碼的錯誤。
• 解析符號到元素以確保它們的存在，並獲取它們的文件和簽名信息。
• 內省並與正在執行的應用程式進行互動。
• 搜尋 pub.dev 網站，找到最適合您用例的包。
• 管理 pubspec.yaml 檔案中的包依賴項。
• 執行測試並分析結果。
• 使用與 dart format 及 Dart 分析伺服器相同的格式化程式和配置來格式化程式碼。

使用 dart mcp-server 命令執行伺服器，該命令必須在您首選的客戶端中進行配置。

本節提供了使用 Antigravity、Gemini CLI、Cursor 和 GitHub Copilot 等流行工具設定 Dart 和 Flutter MCP 伺服器的說明。

要配置 Google Antigravity 以使用 Dart 和 Flutter MCP 伺服器，您可以從可用伺服器列表中安裝它，或將其作為自定義 MCP 伺服器連線。

1. 導航至或開啟 Agent 側面板。

   如果它處於關閉狀態，請透過以下方式開啟：

   • 按 Cmd/Ctrl + L。
   • 轉到 View > Open View... > Agent。

2. 在 Agent 面板的右上角，點選 Additional options (...) 選單按鈕。

3. 選擇 MCP Servers。

4. 在 Agent 面板的右上角，點選 Manage MCP Servers。

從這裡，您可以選擇從內建 MCP 商店安裝 MCP 伺服器，或透過手動配置進行安裝。

1. 在可用 MCP 伺服器列表中，查詢或搜尋 Dart 並點選 Install。

1. 在 Manage MCPs 編輯器檢視的右上角，點選 View raw config。

2. 將以下 dart-mcp-server 條目新增到 mcpServers 對映中

   mcp_config.json

   json

   {
     "mcpServers": {
       "dart-mcp-server": {
         "command": "dart",
         "args": [
           "mcp-server"
         ],
         "env": {}
       }
     }
   }
   

   content_copy

建議同時安裝 Dart 和 Flutter 擴充套件。

1. 透過以下方式開啟 Extensions 檢視：

   • 按 Shift + Cmd/Ctrl + P。
   • 轉到 View > Extensions。

2. 在 Search Extensions 輸入框中，輸入 Flutter。

3. 從擴充套件列表中，選擇 Flutter。

4. 在開啟的 Extension: Flutter 檢視中，點選 Install 按鈕。

   這將同時安裝 Dart 和 Flutter 擴充套件。

要了解有關 Dart 和 Flutter 擴充套件的更多資訊，請檢視在 VS Code 中開發 Flutter 應用。

要配置 Gemini CLI 以使用 Dart 和 Flutter MCP 伺服器，請將 Dart 條目新增到 Gemini 配置的 mcpServers 部分。

• 要為裝置上的所有專案啟用該伺服器，請編輯主目錄中的 ~/.gemini/settings.json 檔案。
• 要為特定專案啟用該伺服器，請編輯專案根目錄中的 .gemini/settings.json 檔案。

{
  "mcpServers": {
    "dart": {
      "command": "dart",
      "args": [
        "mcp-server"
      ]
    }
  }
}

有關更多資訊，請檢視官方 Gemini CLI 文件中關於設定 MCP 伺服器的內容。

Gemini Code Assist 的代理模式 (Agent mode) 集成了 Gemini CLI，可直接在您的 IDE 中提供強大的 AI 代理。如果您尚未設定 Gemini Code Assist 或其代理模式，請按照其開始之前指南進行操作。

要配置 Gemini Code Assist 以使用 Dart 和 Flutter MCP 伺服器，請按照配置 Gemini CLI 的說明進行操作。

您可以透過在代理模式的聊天視窗中輸入 /mcp 來驗證 MCP 伺服器是否已正確配置。

有關更多資訊，請參閱 Gemini Code Assist 官方文件中關於使用代理模式的內容。

預設情況下，Dart 擴充套件使用 VS Code MCP API 來註冊 Dart 和 Flutter MCP 伺服器，以及一個提供活動 Dart 工具守護程序 URI 的工具。

透過在 VS Code 設定中配置 dart.mcpServer 設定，可以顯式啟用或停用 Dart 和 Flutter MCP 伺服器。

要全域性更改此設定，請更新您的使用者設定：

1. 在 VS Code 中，點選 View > Command Palette，然後搜尋 Preferences: Open User Settings (JSON)。

2. 新增以下設定：

   json

   "dart.mcpServer": true
   

   content_copy

如果您希望此設定僅應用於特定工作區，請將該條目新增到您的工作區設定中：

1. 在 VS Code 中，點選 View > Command Palette，然後搜尋 Preferences: Open Workspace Settings (JSON)。

2. 新增以下設定：

   json

   "dart.mcpServer": true
   

   content_copy

有關更多資訊，請參閱 VS Code 官方文件中關於啟用 MCP 支援的內容。

在 Cursor 中配置 Dart 和 Flutter MCP 伺服器的最簡單方法是點選 Add to Cursor 按鈕。

或者，您可以手動配置伺服器：

1. 轉到 Cursor > Settings > Cursor Settings > Tools & Integrations。

2. 點選 Add Custom MCP 或 New MCP Server（取決於您是否已經配置了其他 MCP 伺服器）。

3. 編輯本地專案中的 .cursor/mcp.json 檔案（配置僅適用於當前專案），或編輯主目錄中的全域性 ~/.cursor/mcp.json 檔案（配置將適用於所有專案），以配置 Dart 和 Flutter MCP 伺服器。

   .cursor/mcp.json

   json

   {
     "mcpServers": {
       "dart": {
         "command": "dart",
         "args": [
           "mcp-server"
         ]
       }
     }
   }
   

   content_copy

有關更多資訊，請參閱 Cursor 官方文件中關於安裝 MCP 伺服器的內容。

要配置 OpenCode 以使用 Dart 和 Flutter MCP 伺服器，請將 dart-mcp-server 條目新增到您的 OpenCode 配置中。

OpenCode 配置通常位於 ~/.opencode/config.json 或專案的 opencode key 配置中。

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "dart-mcp-server": {
      "type": "local",
      "command": [
        "dart",
        "mcp-server"
      ],
      "enabled": true,
      "environment": {}
    }
  }
}

要為當前專案配置 Claude Code 以使用 Dart 和 Flutter MCP 伺服器，請使用 claude mcp add CLI 命令。

$ claude mcp add --transport stdio dart -- dart mcp-server

要了解有關在 Claude Code 中配置 MCP 伺服器的更多資訊，請檢視其關於安裝 MCP 伺服器的文件。

要為當前專案配置 Codex CLI 以使用 Dart 和 Flutter MCP 伺服器，請使用 codex mcp add CLI 命令。

$ codex mcp add dart -- dart mcp-server --force-roots-fallback

要了解有關在 Codex CLI 中配置 MCP 伺服器的更多資訊，請檢視其關於連線到 MCP 伺服器的文件。

一旦您使用客戶端設定了 Dart 和 Flutter MCP 伺服器，該伺服器不僅能使客戶端理解您的專案上下文，還能透過工具採取行動。

大語言模型 (LLM) 會決定使用哪些工具以及何時使用，因此您可以專注於用自然語言描述您的目標。讓我們透過在 VS Code 中使用 GitHub Copilot 代理模式的幾個示例來看看它的實際效果。

我們都有過這樣的經歷：構建了一個漂亮的 UI，執行應用程式，結果卻看到了臭名昭著的 RenderFlex 溢位錯誤（黃黑條紋）。現在，您無需手動除錯 widget 樹，可以向 AI 助手傳送類似於以下的提示來尋求幫助：

檢查並修復靜態和執行時分析問題。檢查並修復任何佈局問題。

在幕後，AI 代理會使用 Dart 和 Flutter MCP 伺服器的工具來：

• 檢視錯誤：使用工具從正在執行的應用程式中獲取當前執行時錯誤。
• 檢查 UI：訪問 Flutter widget 樹以理解導致溢位的佈局。
• 應用修復：掌握此上下文後，它會應用修復並再次檢查是否有任何剩餘錯誤。

然後，您可以選擇保留或撤消程式碼更改。

假設您需要在應用程式中新增一個圖表。應該使用哪個包？如何新增它並編寫樣板程式碼？Dart 和 Flutter MCP 伺服器可以透過以下類似的提示簡化整個過程：

找到一個合適的包，用於新增一個折線圖，對映隨時間變化的按鈕點選次數。

AI 代理現在成為了一個真正的助手：

• 找到合適的工具：它使用 pub_dev_search 工具來查詢流行且評價高的圖表庫。
• 管理依賴項：在您確認其選擇（例如 package:fl_chart）後，它會使用工具將該包新增為依賴項。
• 生成程式碼：它會生成新的 widget 程式碼，完成折線圖的樣板程式碼，並將其放入 UI 中。它甚至能自我糾正過程中引入的語法錯誤。之後，您可以進一步自定義。

曾經需要研究、閱讀文件、編輯 pubspec.yaml 以及在應用中編寫相應程式碼的多步驟過程，現在只需一個請求即可完成。

如果您遇到任何問題或對 Dart 和 Flutter MCP 伺服器有任何反饋，請在 dart-lang/ai 問題跟蹤器上提交問題。