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 客户端必须支持 工具 和 资源。为了获得与 Dart 和 Flutter MCP 服务器的最佳开发体验，MCP 客户端还应支持 根。

如果您使用的客户端声称支持根，但实际上并未设置它们，请传递 --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 服务器。

如果您希望在 Firebase Studio 中使用 Dart 和 Flutter MCP 服务器，这是一个代理云开发环境，可帮助您构建和发布高质量的全栈 AI 应用，请按照以下步骤操作

1. 在您的 Firebase Studio 应用项目中，如果尚不存在，请在您的项目中创建一个 .idx/mcp.json 文件，并将以下 Dart 和 Flutter MCP 服务器配置添加到该文件

   .idx/mcp.json

   json

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

   content_copy

2. 确保您的环境正在运行 Dart SDK 3.9/Flutter 3.35 或更高版本。

3. 重建您的工作区以完成设置。

   • 打开命令面板 (Shift+Ctrl+P)。
   • 输入 Firebase Studio: Rebuild Environment。

有关 Firebase Studio 中 MCP 服务器配置的更多信息，请查看 连接到 MCP 服务器 和 自定义您的 Firebase Studio 工作区。

Gemini Code Assist 的 Agent 模式 集成了 Gemini CLI，以便在您的 IDE 中提供强大的 AI 代理。如果您尚未设置 Gemini Code Assist 或其代理模式，请遵循其 开始之前说明 以开始使用。

要配置 Gemini Code Assist 以使用 Dart 和 Flutter MCP 服务器，请遵循 配置 Gemini CLI 的说明。

您可以通过在 Agent 模式的聊天窗口中键入 /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.ac.cn/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 服务器后，Dart 和 Flutter MCP 服务器使客户端不仅能够推理您的项目上下文，还能使用工具采取行动。

大型语言模型 (LLM) 决定何时使用哪些工具，因此您可以专注于用自然语言描述您的目标。让我们通过使用 VS Code 中 GitHub Copilot 的 Agent 模式的几个示例来了解这一点。

我们都遇到过这种情况：您构建了一个漂亮的 UI，运行该应用，然后遇到了臭名昭著的黄色和黑色条纹的 RenderFlex 溢出错误。现在，您可以不必手动调试小部件树，而是可以使用类似于以下内容的提示来寻求 AI 助手的帮助

检查并修复静态和运行时分析问题。检查并修复任何布局问题。

在幕后，AI 代理使用 Dart 和 Flutter MCP 服务器的工具来

• 查看错误：它使用工具从正在运行的应用程序获取当前的运行时错误。
• 检查 UI：它访问 Flutter 小部件树以了解导致溢出的布局。
• 应用修复：掌握了这些上下文后，它应用修复并再次检查是否有任何剩余错误。

然后您可以保留或撤消代码更改。

假设您需要向您的应用添加图表。您应该使用哪个包？如何添加它并编写样板代码？Dart 和 Flutter MCP 服务器可以使用类似于以下内容的提示来简化整个过程

找到一个合适的包来添加一个折线图，该图表将按钮按压次数映射到时间上。

AI 代理现在真正充当助手

• 找到合适的工具：它使用 pub_dev_search 工具来查找流行且评价很高的图表库。
• 管理依赖项：在您确认其选择后，例如 package:fl_chart，它会使用一个工具将该包添加为依赖项。
• 生成代码：它生成新的 widget 代码，包含用于折线图的样板代码，并将其放置在 UI 中。它甚至可以自行纠正在此过程中引入的语法错误。您可以从那里进一步自定义。

过去需要多步流程的研究、阅读文档、编辑 pubspec.yaml 以及在应用程序中编写适当的代码，现在只需一个请求即可完成。