使用 Dart 与 Flutter MCP 服务器提升你开发体验

前言

原文 Dart 与 Flutter MCP 服务器

Ander Dobo（产品经理）和 Kenzie Davisson（工程师）

AI 开发领域正在迅速发展，强大的 AI 代理已经能够协助开发者完成各种任务。要真正释放它们的潜力，这些代理需要访问超出其固有能力范围的上下文和工具。这就是模型上下文协议（MCP）的用武之地，它作为一个标准化的插件系统，将 AI 模型与外部系统和数据源连接起来。Dart 和 Flutter MCP 服务器是我们为 Dart 和 Flutter 生态系统实现的该标准方案。

本文探讨了如何利用 Dart 和 Flutter MCP 服务器来增强你的 Dart 和 Flutter 开发体验。我们将介绍 Dart 和 Flutter MCP 服务器提供的有用工具，并展示如何配置该服务器，以便在 Gemini CLI、VS Code 中的 Gemini Code Assist、Cursor 以及 VS Code 中的 GitHub Copilot 等流行工具中使用。

这种方法是一个快速发展的生态系统的一部分。例如，Firebase 团队最近宣布推出了自己的实验性 Firebase MCP 服务器，该服务器为 AI 助手提供了管理 Firebase 认证、查询 Firestore 数据库以及了解影响你生产环境中应用程序的崩溃类型等功能。

介绍 Dart 与 Flutter MCP 服务器

Dart 和 Flutter MCP 服务器（需要 Dart SDK 3.9/Flutter 3.35 beta 或更高版本）是一个强大的工具，它弥合了 AI 编码助手与 Dart/Flutter 开发生态系统之间的差距。它允许 AI 模型与您的开发环境以及正在运行的 Dart 或 Flutter 应用程序进行交互，提供智能洞察，并使用通常只能从您的 IDE 或 Dart & Flutter DevTools 中访问的工具。

Dart 和 Flutter MCP 服务器能为你做些什么？

Dart 与 Flutter MCP 服务器提供了一系列不断扩展的工具，使 AI 助手能够深入了解你的项目。它能够：

分析并修复错误 项目中的代码。
内省并交互正在运行的应用程序 （例如触发热重载、获取选中的小部件、获取运行时错误）。
搜索 pub.dev 以找到适合您用例的最佳包。
在你的 pubspec.yaml 中管理包依赖项 。
运行测试 并分析结果。
……以及其他更多内容！

请查看工具的最新列表，请参阅官方文档。

Dart 与 Flutter MCP 服务器实战

Dart 和 Flutter MCP 服务器的真正强大之处在于，它使 AI 助手和代理不仅能够理解你项目的上下文，还能使用工具采取行动。大型语言模型（LLM）决定使用哪些工具以及何时使用，这样你就可以专注于用自然语言描述你的目标。让我们通过几个在 VS Code 中使用 GitHub Copilot 代理模式的示例来看看它的实际效果。

修复运行时布局错误

我们都遇到过这种情况：你构建了一个漂亮的 UI，运行应用后却看到臭名昭著的黄黑条纹 RenderFlex 溢出错误。现在，你无需再手动调试控件树，可以向你的 AI 助手寻求帮助。

Press enter or click to view image in full size

提示：“检查并修复静态和运行时分析问题。检查并修复任何布局问题。”（注意：为简洁起见，此录像的部分内容已加速播放。）

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

查看错误： 它使用一个工具从正在运行的应用程序中获取当前的运行时错误。
检查界面： 它会访问 Flutter 的 widget 树，以理解导致溢出的布局。
应用修复： 拥有此上下文后，它会应用修复并再次检查是否存在任何剩余错误。

然后你可以保留或撤销代码更改。

通过包搜索添加新功能

假设你需要在应用中添加一个图表。你应该使用哪个包？如何添加并编写样板代码？Dart 和 Flutter MCP 服务器让整个流程变得更加高效。

Press enter or click to view image in full size

提示：“寻找一个合适的包来添加一个折线图，以记录按钮按下次数随时间的变化。”（注：为了简洁起见，此录音的部分内容已被加速播放。）

AI 代理现在真正成为了一个助手：

找到合适的工具： 它使用 pub_dev_search 工具来查找受欢迎且评分较高的图表库。
管理依赖项： 在确认选择后（例如，syncfusion_flutter_charts），它会使用工具将该包添加到你的 pubspec.yaml 中，并运行 pub get。
生成代码： 它会生成新的组件代码，包含完整的折线图模板代码，并将其放置在 UI 中。即使在过程中引入了语法错误，它也能自动进行修正。你可以在此基础上进一步自定义。

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

通过流行的 AI 驱动开发环境和工具进行配置

由于模型上下文协议 (MCP) 正在迅速成为集成工具链和 LLMs 的标准，因此支持使用 MCP 服务器的工具列表也在不断增长。Dart 和 Flutter MCP 服务器可以与任何 MCP 客户端*集成。请查看 MCP 用户指南以获取示例客户端列表。

首先，Dart 和 Flutter MCP 服务器需要 Dart SDK 3.9/Flutter 3.35 beta 或更高版本，因此请切换到 beta 渠道并运行 flutter upgrade 以确保你拥有最新版本。

要访问 Dart 和 Flutter MCP 服务器的所有功能，MCP 客户端必须支持 工具和资源。为了获得最佳的 Dart 和 Flutter MCP 服务器开发体验，MCP 客户端还应支持* 根目录 。

Gemini CLI

Gemini CLI 是一个开源的 AI 代理，它将 Gemini 的强大功能直接带入你的终端，为你提供从提示到模型的直接路径。虽然它在编程方面表现出色，但 Gemini CLI 还是一个多功能的本地工具，你可以将其用于各种任务，从内容生成和问题解决，到深度研究和任务管理。

Press enter or click to view image in full size

按照快速入门说明在您的机器上安装 Gemini CLI。

确保你的环境运行的是 Dart SDK 3.9 / Flutter 3.35 beta 或更高版本。如果需要的话，请切换通道并运行 flutter upgrade。

要配置 Gemini CLI 以使用 Dart 和 Flutter MCP 服务器，请编辑你本地项目中的 .gemini/settings.json 文件（这仅为此项目启用服务器），或者编辑你主目录中的全局 ~/.gemini/settings.json 文件（这将为所有项目启用服务器）。

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

专业提示：

如果你在 Gemini CLI 中输入 /mcp，你将能够看到一组可供使用的 MCP 工具。
如果你的项目有希望 LLM 了解的特定指南或规则，可以通过在项目的根目录中添加一个 GEMINI.md 文件来记录这些内容。

Gemini 代码助手

注意：这目前需要使用 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 和 Flutter MCP 服务器，请按照以下说明操作：

首先安装并配置 Gemini CLI。
按照上述相同的说明配置 Gemini CLI 以使用 Dart 和 Flutter MCP 服务器，这也为 Gemini Code Assist 启用了该功能。

你可以通过在 Agent 模式下的聊天窗口中输入 /mcp 来验证 MCP 服务器是否已正确配置。

Press enter or click to view image in full size

Firebase Studio

Firebase Studio 是一个基于智能代理的云端开发环境，可帮助您构建并发布高质量的全栈 AI 应用程序，包括 API、后端、前端、移动应用等。

在 Firebase Studio 中添加 MCP 服务器

在你的项目中创建一个 .idx/mcp.json 文件（如果该文件尚不存在），并将上述与 Gemini CLI 说明中相同的 Dart 和 Flutter MCP 服务器配置添加到该文件中，
确保你的环境运行的是 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要的话，请切换通道并运行 flutter upgrade。
通过打开命令面板（Shift+Ctrl+P）并输入 Firebase Studio: Rebuild Environment 来重建工作区以完成设置。

有关 Firebase Studio 中 MCP 服务器配置的更多信息，请参阅自定义您的 Firebase Studio 工作区。

Press enter or click to view image in full size

VS Code 中的 GitHub Copilot

GitHub Copilot 是一个由 AI 驱动的代码助手，已集成到 VS Code 中。Dart VS Code 扩展通过向 VS Code 注册 Dart 和 Flutter MCP 服务器，为 Copilot 提供了简单的集成支持。Copilot 或任何其他支持 VS Code MCP API 的 AI 代理都会自动代表你配置 Dart 和 Flutter MCP 服务器，因此你无需手动进行配置。

确保你的环境运行的是 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要的话，请切换通道并运行 flutter upgrade。

要配置 Dart 和 Flutter MCP 服务器，请将以下内容添加到你的 VS Code 用户设置中：

"dart.mcpServer": true

你还可以考虑将 "chat.mcp.discovery.enabled": true 添加到 VS Code 用户设置中，以便自动发现其他工具（如 Claude Desktop 或 Cursor）中配置的服务器。

光标

Cursor 是一个基于 VS Code 的热门 AI 驱动代码编辑器。你可以在 Cursor 中安装 Dart 和 Flutter 的 VS Code 扩展，从而获得与 VS Code 类似的开发体验，并且还能使用 Cursor 提供的更多以 AI 为中心的功能。

确保你的环境运行的是 Dart SDK 3.9/Flutter 3.35 beta 或更高版本。如果需要的话，请切换通道并运行 flutter upgrade。

要配置 Cursor 以使用 Dart 和 Flutter MCP 服务器，你可以选择点击 Dart 和 Flutter MCP 服务器的 README 文件中的 Add to Cursor 按钮（最简单的方法），或者按照官方 Cursor 文档中的说明安装 MCP 服务器。配置完 Dart 和 Flutter MCP 服务器后，你的 .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 和 Flutter MCP 服务器可在任何支持 MCP 的地方使用*。请按照你选择的 MCP 客户端提供的说明来配置 Dart 和 Flutter MCP 服务器。

并非所有工具都受支持，因为有些工具需要访问特定的 IDE 服务。

接下来会有什么？

这个实验性版本只是第一步。我们的愿景是让 Dart 和 Flutter 开发者能够通过 AI 驱动的体验，在你工作的地方实现极致的生产力。以下是我们接下来要投入的一些关键领域：

更深入、无缝的 IDE 集成： 我们正与 Firebase Studio、Android Studio 中的 Gemini、Gemini Code Assist 等团队紧密合作，让使用 Dart 和 Flutter MCP 服务器变得轻松自如。
AI 驱动的 DevTools 功能： 我们计划将 AI 辅助功能直接引入 Dart 和 Flutter DevTools。你无需再手动筛选复杂的数据，只需直接向你的 AI 助手提问，例如在查看时间轴跟踪时问 “为什么我的应用在这里出现卡顿？”，在检查内存快照时问 “是什么导致了这次内存泄漏？”，甚至可以直接从 Flutter 检查器中提问 “帮我解决这个布局问题”。
不断壮大的工具箱： 我们将持续扩展 MCP 服务器的功能，例如支持更复杂的代码重构。

尽管我们的路线图由愿景指引，但您的反馈对于帮助我们确定对您而言最重要的事项至关重要。

总之

通过为你的代码助手提供项目上下文以及对官方工具链的访问权限，你可以更快地推进开发，更高效地解决问题，并专注于最重要的事情：构建美观、高质量的应用程序。Dart 和 Flutter MCP 服务器代表了 Dart 与 Flutter 领域 AI 驱动开发的重要飞跃，也延续了我们团队致力于提供高效开发者体验的承诺。

这仅仅是个开始。随着模型上下文协议（Model Context Protocol）的日益普及，以及 Dart 和 Flutter MCP 服务器功能的不断增强，你与基于 AI 的开发工具及代理之间的协作将变得越来越智能和无缝。

此功能仍处于实验阶段，您的反馈对我们来说非常宝贵。 立即尝试在您喜爱的编辑器中启用它，并通过在我们的 GitHub 仓库提交问题告知您的想法。拥抱 AI 辅助开发的未来，在您的 Dart 和 Flutter 项目中解锁全新的生产力水平。我们迫不及待地想看到您将创造出什么！

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

猫哥 APP

flutter 学习路径

end