5分钟上手Dart MCP Server

哈喽，我是老刘

老刘做Flutter开发已经六七年了，这两年在日常开发中越来越多的使用AI工具进行协助。

从最早的使用ChatGPT对话，复制代码。到现在的Cursor和Claude Code。

但是不知道你有没有遇到过这种情况？

AI帮你写代码，看起来挺像那么回事。

但一到调试，就开始优点"瞎猜"了。

改这里试试？不行。

改那里试试？还是不行。

因为AI只能看到你的代码和日志，根本"看不见"你的应用在设备上到底长什么样！

但现在，这个问题终于有解了！

Dart MCP Server让AI能直接看到你的Flutter组件树、布局结构，甚至运行状态。

从此，AI调试不再靠猜，而是靠"看"！

那么Dart MCP 如何使用呢？老刘这里给大家演示一下。

在Trae中配置Dart MCP

为啥选择Trae？

前几天在对比各种AI编程工具的文章中就有人问Trae。

老刘觉得Trae确实是非常适合作为演示和AI开发入门的。

一方面因为它类似Cursor是基于VS Code进行二次开发的，所以能适配很大一部分比例的开发者现有的开发环境。在Cursor或者VS Code中的配置方式也基本一致。

另一方面是因为可以免费用，付费部分也不贵，而且基本不需要配置网络环境，可以放心使用。

说了这么多，到底怎么用？

第一步：安装指定版本Flutter

首先确保你的电脑已经安装Flutter 3.35 以上的版本，并且设置好了环境变量，可以正常执行Flutter、dart相关命令。

然后在终端运行这个命令：

bash 复制代码

dart --version

如果出现下面的版本或者是更高版本就可以了

yaml 复制代码

Dart SDK version: 3.9.0 (stable)

第二步：在Trae中配置MCP服务

打开Trae，进入AI设置页面。

打开MCP选项卡

点击添加------手动添加

在MCP的配置对话框中填入下面的代码：

json 复制代码

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

点击确认后即可

第三步：验证连接成功

等等一小会后如果看到下面图片中的绿色对勾，证明mcp配置成功了。

踩坑提醒：

如果你在使用某些MCP客户端（比如Cursor）时发现连接不稳定或者功能不完整，很可能是因为客户端虽然声称支持Roots功能，但实际上并没有正确设置。

这时候你需要在配置中添加--force-roots-fallback参数：

json 复制代码

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

什么时候需要添加这个参数？

使用Cursor等编辑器时连接不稳定
MCP服务显示连接成功但功能受限
无法正常访问项目根目录管理工具
AI助手无法正确理解项目结构

简单来说，如果你发现MCP虽然配置成功但是工作有问题，先试试加上这个参数，基本能解决90%的连接问题。

Dart版本过低问题 如果AI调用MCP服务时出现提示Dart版本不够高的问题，类似如下提示：

swift 复制代码

The required version is 3.9.0-163.0.dev or greater.

可以在运行Flutter项目时增加参数"--print-dtd"

bash 复制代码

flutter run --print-dtd

具体问题的详情可以看老刘之前的文章： Dart MCP翻车了！3.9.0版本无法运行，这个坑你踩过吗？

实战案例：调试布局溢出问题

首先说明以下，这次演示使用Trae，LLM选择 Cluade-4-Sonnet。

我专门设计了一个包含4个布局问题的页面，如下图所示：

首先我们关闭Dart Mcp服务，然后让AI去分析打开页面的布局问题并自动修复。

最终它会修复其中的两个问题，一个是Row溢出，一个是Column溢出。

这个结果也很好理解，因为这两个问题在运行日志中都有对应的错误提示。

接下来我们打开Dart Mcp，然后明确的让LLM通过MCP去分析页面的布局问题并自动修复。

这次的效果比较理想，AI准确找到了四个问题，并全部进行了修复。

特别说明 因为老刘这次案例的代码中从文本描述到每一块组件的注释都对问题进行了提示，因此如果你明确的和AI说页面中存在四个布局问题，那么AI大概率也能全部找到并修复。

下面是"测试项0：的代码：

Dart 复制代码

// 文本溢出测试
  Widget _buildTextOverflowItem(int index) {
    return Card(
      margin: const EdgeInsets.all(8.0),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '测试项 $index - 文本溢出',
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            // 创建一个有边框的容器来显示溢出边界
            Container(
              width: 200,
              height: 50,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 2),
                color: Colors.yellow.withOpacity(0.3),
              ),
              child: const OverflowBox(
                maxWidth: double.infinity,
                child: Text(
                  '这是一段非常长的文本，用于测试文本溢出的情况。这段文本会超出容器的宽度，从而产生明显的溢出效果，可以看到文本超出红色边框。',
                  style: TextStyle(fontSize: 16, color: Colors.black),
                  overflow: TextOverflow.visible,
                  softWrap: false,
                  // 使用OverflowBox让文本真正溢出容器边界
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

这也是我们日常和AI协作时应该遵循的一个原则：尽量提供给AI充分且精确的信息。

但是如果把注释和文本内容都进行修改，去掉提示性的信息，那么在没有MCP协助的情况下，AI只通过代码和日志把4个问题都找出来的概率就会大幅下降。

总结

好了，Dart Mcp Server的配置和使用方式就介绍完了。

总体来说，Dart MCP不只是一个调试工具。

它更是Flutter开发方式变革的开始！

当AI能"看见"你的组件树，理解你的布局逻辑时，开发方式可以发生根本型的变化。

以前我们写代码，AI只能"听"我们描述，然后通过日志判断运行效果。

现在有了Dart MCP，AI终于能"看见"真实的运行状态。

代码会说话，但只有AI听得懂。

你觉得Dart Mcp Server还能为Flutter开发带来哪些应用场景？

评论区聊聊你的想法！

如果看到这里的同学对客户端开发或者Flutter开发感兴趣，欢迎联系老刘，我们互相学习。私信免费领老刘整理的《Flutter开发手册》，覆盖90%应用开发场景。可以作为Flutter学习的知识地图。

------------ laoliu_dev