【文章翻譯】Supercharge Your Dart & Flutter Development Experience with the Dart MCP Server

【文章內容使用 Gemini 2.5 Flash 自動翻譯產生】

透過 Dart MCP Server 提升您的 Dart 和 Flutter 開發體驗

作者：Ander Dobo — 產品經理，Kenzie Davisson — 工程師

AI 開發的格局正在迅速演變，強大的代理能夠協助開發人員完成各種任務。為了真正釋放它們的潛力，這些代理需要存取超越其固有能力的上下文和工具。這就是 Model Context Protocol (MCP) 的作用，它充當標準化的外掛系統，將 AI 模型連接到外部系統和資料來源。Dart MCP Server 是我們針對 Dart 和 Flutter 生態系統實施此標準的成果。

本文探討如何利用 Dart MCP Server 來增強您的 Dart 和 Flutter 開發體驗。我們將介紹 Dart MCP Server 提供的實用工具，並展示如何配置伺服器以用於 Gemini CLI、VS Code 中的 Gemini Code Assist、Cursor 和 VS Code 中的 GitHub Copilot 等常用工具。

這種方法是快速成長的生態系統的一部分。例如，Firebase 團隊最近發布了他們自己的實驗性 Firebase MCP Server，它為 AI 助理提供了管理 Firebase 身份驗證、查詢 Firestore 資料庫以及了解影響您在生產中應用程式的應用程式崩潰類型的工具。

介紹 Dart MCP Server

Dart MCP Server（需要 Dart SDK 3.9/Flutter 3.35 beta 或更高版本）是一個功能強大的工具，它彌合了 AI 編碼助理和 Dart/Flutter 開發生態系統之間的鴻溝。它允許 AI 模型與您的開發環境和正在運行的 Dart 或 Flutter 應用程式互動，提供智能洞察，並使用通常只有您的 IDE 或 Dart & Flutter DevTools 才能存取的工具。

Dart MCP Server 能為您做什麼？

Dart MCP Server 提供不斷增加的工具清單，這些工具讓 AI 助理能夠深入了解您的專案。它可以：

• 分析並修復 專案程式碼中的錯誤。
• 內省並與您正在運行的應用程式互動（例如觸發熱重載、取得選取的 Widget、擷取執行時錯誤）。
• 在 pub.dev 搜尋 最適合您用例的套件。
• 管理 pubspec.yaml 中的套件相依性。
• 運行測試 並分析結果。
• ……還有更多！

有關最新工具清單，請參閱官方文件。

Dart MCP Server 實際應用

Dart MCP Server 的真正力量在於它如何讓 AI 助理和代理不僅能夠推斷您專案的上下文，還能透過工具採取行動。大型語言模型 (LLM) 決定使用哪些工具以及何時使用，因此您可以專注於用自然語言描述您的目標。讓我們透過幾個使用 VS Code 中 GitHub Copilot Agent 模式的範例來看看實際應用。

修正執行時佈局錯誤

我們都經歷過這種情況：您建立了一個漂亮的 UI，運行應用程式，卻看到臭名昭昭的 RenderFlex 溢出錯誤的黃黑條紋。現在，您無需手動調試 Widget 樹，而是可以向 AI 助理尋求協助。

提示： 「檢查並修復靜態和執行時分析問題。檢查並修復任何佈局問題。」（注意：為了簡潔起見，此錄製的部分內容已加速。）

在幕後，AI 代理使用 Dart MCP Server 的工具來：

1. 查看錯誤： 它使用工具從正在運行的應用程式中獲取當前執行時錯誤。
2. 檢查 UI： 它存取 Flutter Widget 樹以了解導致溢出的佈局。
3. 應用修復： 借助此上下文，它應用修復並再次檢查是否存在任何剩餘錯誤。

然後您可以保留或撤銷程式碼變更。

透過套件搜尋新增功能

想像一下，您需要為您的應用程式新增一個圖表。您應該使用哪個套件？如何新增它並編寫樣板程式碼？Dart MCP Server 簡化了整個過程。

提示： 「找到一個合適的套件來新增一個線圖，用於繪製一段時間內按鈕按下的次數。」（注意：為了簡潔起見，此錄製的部分內容已加速。）

AI 代理現在充當真正的助手：

1. 找到正確的工具： 它使用 pub_dev_search 工具來尋找流行且評價很高的圖表函式庫。
2. 管理相依性： 在您確認其選擇（例如，syncfusion_flutter_charts）後，它使用工具將套件新增到您的 pubspec.yaml 並執行 pub get。
3. 產生程式碼： 它產生新的 Widget 程式碼，包括線圖的樣板程式碼，並將其放置在 UI 中。它甚至會自動更正在此過程中引入的語法錯誤。您可以從那裡進一步自訂。

過去需要研究、閱讀文件、編輯 pubspec.yaml 以及在應用程式中編寫相應程式碼的多步驟過程，現在變成了一個單一請求。

使用流行的 AI 驅動開發環境和工具進行配置

由於 Model Context Protocol 正在迅速成為整合工具鏈和 LLM 的標準，因此可以使用 MCP 伺服器的工具清單不斷增長。Dart MCP Server 可以與任何 MCP 用戶端集成*。請查看 MCP 用戶指南 以獲取用戶端範例清單。

首先，Dart MCP Server 需要 Dart SDK 3.9/Flutter 3.35 beta 或更高版本，因此切換到 beta channel 並運行 flutter upgrade 以確保您擁有最新版本。

*要存取 Dart MCP Server 的所有功能，MCP 用戶端必須支援 工具 和 資源。為了獲得使用 Dart MCP Server 的最佳開發體驗，MCP 用戶端還應該支援 根。

Gemini CLI

Gemini CLI 是一個開源 AI 代理，它將 Gemini 的強大功能直接帶到您的終端機中，提供從您的提示到模型的直接路徑。雖然它擅長編碼，但 Gemini CLI 是一個多功能的本地實用程式，您可以用它來完成各種任務，從內容生成和問題解決到深入研究和任務管理。

請依照快速入門說明在您的機器上安裝 Gemini CLI。

確保您的環境正在運行 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要，請切換頻道並運行 flutter upgrade。

若要配置 Gemini CLI 以使用 Dart MCP Server，請編輯您本地專案中的 .gemini/settings.json 檔案（這只會啟用此專案的伺服器），或編輯您家目錄中的全域 ~/.gemini/settings.json 檔案（這會啟用所有專案的伺服器）。

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

專業提示：

• 如果您使用 /mcp 提示 Gemini CLI，您將能夠看到可用的一組 MCP 工具。
• 如果您的專案有您希望 LLM 了解的特定準則或規則，您可以透過在專案根目錄中新增一個 GEMINI.md 檔案來記錄這些準則或規則。

Gemini Code Assist

注意：這目前需要 Gemini Code Assist「Insiders」頻道。請依照 Gemini Code Assist 說明 啟用 Insiders 版本。

Gemini CLI 的底層技術也已整合到 VS Code 中的 Gemini Code Assist 中，這是一個強大的 AI 助理，直接在您的 IDE 中提供聊天和代理功能。在 代理模式 下，您可以在聊天視窗中撰寫提示，並觀察 Gemini 如何努力滿足您的請求。請依照 設定指南 開始使用 Gemini Code Assist。

確保您的環境正在運行 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要，請切換頻道並運行 flutter upgrade。

若要設定 Gemini Code Assist 使用 Dart MCP Server，請依照以下說明操作：

1. 首先安裝並設定 Gemini CLI。
2. 依照上述說明設定 Gemini CLI 以使用 Dart MCP Server，這也會為 Gemini Code Assist 啟用它。

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

Firebase Studio

Firebase Studio 是一個代理式雲端開發環境，可協助您建立和發布生產品質的全端 AI 應用程式，包括 API、後端、前端、行動裝置等等。

若要在 Firebase Studio 中新增 MCP 伺服器

1. 在您的專案中建立一個 .idx/mcp.json 檔案（如果尚不存在），並將與上述 Gemini CLI 說明相同的 Dart MCP Server 設定新增到該檔案中。
2. 確保您的環境正在運行 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要，請切換頻道並運行 flutter upgrade。
3. 透過開啟命令面板 (Shift+Ctrl+P) 並輸入 Firebase Studio: Rebuild Environment 來重建您的工作區以完成設定。

有關 Firebase Studio 中 MCP 伺服器配置的更多資訊，請參閱 自訂您的 Firebase Studio 工作區。

VS Code 中的 GitHub Copilot

GitHub Copilot 是一個整合到 VS Code 中的 AI 程式碼助理。Dart VS Code 擴充功能透過向 VS Code 註冊 Dart MCP Server 來為 Copilot 提供簡單的整合。Copilot 或任何其他支援 VS Code MCP API 的 AI 代理會自動為您配置 Dart MCP Server，因此您無需手動操作。

確保您的環境正在運行 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要，請切換頻道並運行 flutter upgrade。

若要設定 Dart MCP Server，請將以下內容新增到您的 VS Code 使用者設定中：

"dart.mcpServer": true

您也可以考慮將 "chat.mcp.discovery.enabled": true 添加到您的 VS Code 用戶設置中，以自動發現其他工具（如 Claude Desktop 或 Cursor）中配置的服務器。

Cursor

Cursor 是一個基於 VS Code 的流行 AI 程式碼編輯器。Dart 和 Flutter VS Code 擴充功能可以安裝在 Cursor 中，以提供類似於您在 VS Code 中預期的開發體驗，並提供 Cursor 提供的額外 AI 相關功能。

確保您的環境正在運行 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要，請切換頻道並運行 flutter upgrade。

若要設定 Cursor 以使用 Dart MCP Server，您可以點擊 Dart MCP Server README 檔案中的 Add to Cursor 按鈕（最簡單的方法），或依照官方 Cursor 文件中的說明 安裝 MCP 伺服器。設定 Dart MCP Server 後，您的 .cursor/mcp.json 檔案中應該會出現以下內容，該檔案可以是 專案檔案或全域檔案，具體取決於您希望啟用 MCP 伺服器的位置：

{
  "mcpServers": {
    "dart": {
      "command": "dart",
      "args": [
        "mcp-server",
        "--experimental-mcp-server", // Can be removed for Dart 3.9.0 or later
        "--force-roots-fallback" // Workaround for a Cursor issue with Roots support
      ]
    }
  }
}

其他工具

Dart MCP Server 可用於支援 MCP 的任何地方*。請依照您選擇的 MCP 用戶端提供的說明來設定 Dart MCP Server。

*並非所有工具都受支援，因為有些工具需要存取特定的 IDE 服務。

接下來是什麼？

此實驗性版本僅是第一步。我們的願景是讓 Dart 和 Flutter 開發人員透過符合您工作方式的 AI 驅動體驗，達到最高的生產力。以下是我們接下來將投入的一些關鍵領域：

• 更深入、無縫的 IDE 整合： 我們正在與 Firebase Studio、Android Studio 中的 Gemini、Gemini Code Assist 以及其他團隊密切合作，讓 Dart MCP Server 的使用毫不費力。
• AI 驅動的 DevTools 功能： 我們計劃將 AI 協助直接引入 Dart 和 Flutter DevTools。您無需手動篩選複雜資料，只需在查看時間軸追蹤時向 AI 助理提出問題，例如：「我的應用程式在這裡為何卡頓？」、在檢查記憶體快照時：「什麼原因導致此記憶體洩漏？」，甚至直接從 Flutter Inspector 中：「幫助我修復此佈局問題」。
• 不斷增長的工具箱： 我們將繼續擴展 MCP 伺服器的功能，例如支援更複雜的重構。

雖然我們的路線圖以我們的願景為指導，但您的 回饋 對於幫助我們確定對您最重要的優先順序至關重要。

結論

透過為您的編碼助理提供專案的上下文和對官方工具鏈的存取權，您可以更快地移動，更有效地解決問題，並專注於最重要的事情：構建美觀、高品質的應用程式。Dart MCP Server 代表了 Dart 和 Flutter AI 驅動開發的重大飛躍，也是我們團隊致力於提供高效開發人員體驗的延續。

這才剛剛開始。隨著 Model Context Protocol 變得更加普及，並且 Dart MCP Server 獲得更多功能，您與 AI 驅動的開發工具和代理之間的協作將會變得更加智慧和無縫。

此功能仍在實驗中，您的回饋非常寶貴。 立即在您最喜歡的編輯器中啟用它，並在我們的 GitHub 儲存庫 上提交問題，讓我們知道您的想法。擁抱 AI 輔助開發的未來，並在您的 Dart 和 Flutter 專案中解鎖新的生產力水平。我們迫不及待想看看您會建立什麼！

---

透過 Dart MCP Server 提升您的 Dart 和 Flutter 開發體驗 最初發佈於 Flutter 的 Medium 平台，人們在該平台繼續透過標註和回應此故事來進行對話。