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相关命令。

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

dart --version

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

Dart SDK version: 3.9.0 (stable) 

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

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

打开MCP选项卡

点击添加——手动添加