哈嘍，我是老劉
老劉做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選項卡
點擊添加——手動添加
在MCP的配置對話框中填入下面的代碼：
{
"mcpServers": {
"dart": {
"command": "dart",
"args": [
"mcp-server"
]
}
}
}點擊確認後即可
第三步：驗證連接成功
等等一小會後如果看到下面圖片中的綠色對勾，證明mcp配置成功了。
踩坑提醒：
如果你在使用某些MCP客户端（比如Cursor）時發現連接不穩定或者功能不完整，很可能是因為客户端雖然聲稱支持Roots功能，但實際上並沒有正確設置。
這時候你需要在配置中添加--force-roots-fallback參數：
{
"mcpServers": {
"dart": {
"command": "dart",
"args": [
"mcp-server",
"--force-roots-fallback"
]
}
}
}什麼時候需要添加這個參數？
- 使用Cursor等編輯器時連接不穩定
- MCP服務顯示連接成功但功能受限
- 無法正常訪問項目根目錄管理工具
- AI助手無法正確理解項目結構
簡單來説，如果你發現MCP雖然配置成功但是工作有問題，先試試加上這個參數，基本能解決90%的連接問題。
Dart版本過低問題
如果AI調用MCP服務時出現提示Dart版本不夠高的問題，類似如下提示：
The required version is 3.9.0-163.0.dev or greater.可以在運行Flutter項目時增加參數“--print-dtd”
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：的代碼：
// 文本溢出測試
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學習的知識地圖。
覆蓋90%開發場景的《Flutter開發手冊》
