Skip to main content

Flutter AI 工具如何運作

了解 agent skills、Dart 與 Flutter MCP server,以及套件 skills 如何協同運作, 輔助你的開發工作流程。

Flutter 與 Dart 提供一套整合的工具組,協助 AI 程式開發助理理解你的程式碼庫、 遵循最佳實務,並準確地執行開發任務。

工具生態系總覽

#

Flutter AI 工具生態系由六個互補的元件組成:

  1. Agent skills:以任務為導向的藍圖,教導助理如何執行特定工作流程 (例如建立響應式版面配置或撰寫測試)。
  2. Dart 與 Flutter MCP server:一個 Model Context Protocol (MCP) server, 向助理提供即時的 SDK 診斷、符號解析與執行階段檢視功能。
  3. Developer Knowledge MCP server:雲端代管的文件搜尋 server, 讓助理能直接存取官方 Flutter 與 Dart 文件。
  4. 套件 skills:直接發布在第三方 pub.dev 套件內的 skills, 讓助理立即掌握特定函式庫的專業知識。
  5. 專用 agents:配備專注工具與系統指令的專屬 agent 角色, 用於獨立的工作流程,例如無障礙稽核。
  6. Agent rules:每次你與助理開啟新工作階段時, 都會加入情境視窗 (context window) 的持久性規則 (例如指示助理在修改 Flutter 元件 (Widget) 時主動觸發 hot reload)。

Agent skills

#

Agent skills 提供一種標準化的方式, 讓 AI 助理具備程序性的領域專業知識。

漸進式揭露

#

Skills 使用漸進式揭露 (progressive disclosure) 來節省模型的情境空間:

  • 探索階段:助理一開始只會從 .agents/skills 目錄讀取 skill 的中繼資料 (名稱與簡短描述)。
  • 執行階段:當助理判斷某個 skill 與你的提示相關時, 才會載入完整的指令 (SKILL.md) 與輔助的參考腳本。

官方 skills 儲存庫

#
  • flutter/agent-plugins: 提供 Flutter 開發的 skills,包括元件建構、宣告式導覽、響應式設計與狀態管理。
  • dart-lang/skills:提供 Dart 開發的 skills,包括撰寫單元測試、相依套件解析與靜態分析問題修復。

Dart 與 Flutter MCP server

#

Dart 與 Flutter MCP server 實作了開放的 Model Context Protocol (MCP), 透過標準輸入輸出 (stdio) 將 AI 助理連接到即時的 Dart SDK 與 Flutter 工具。

MCP server 提供的主要功能包括:

  • 靜態分析與診斷:檢視並修正整個專案中 analyzer 的錯誤與警告。
  • 符號解析:將符號解析至其定義、簽章與文件。
  • 執行階段檢視:在進行中的除錯工作階段期間,查詢執行中 Flutter 應用程式的狀態。
  • 套件管理:搜尋 pub.dev 並管理 pubspec.yaml 中的相依套件。
  • 測試與格式化:執行單元測試與元件測試,並依照 dart format 規則格式化程式碼。

Developer Knowledge MCP server

#

本機的 Dart 與 Flutter MCP server 著重於本機程式碼庫分析與執行階段除錯, 此外你也可以讓助理具備搜尋官方線上文件的能力。

Developer Knowledge MCP server 將 AI 助理連接到 Google 的開發者文件語料庫,包括 docs.flutter.dev、 dart.dev 與官方 API 參考文件。 這讓助理能在對話過程中直接取得最新的指南、遷移說明與 API 參考文件。


套件 skills

#

除了 Flutter 核心 skills 之外,函式庫作者也可以將官方 skills 直接打包在他們發布於 pub.dev 的套件中。

當你為專案加入相依套件時,可以使用 skills CLI 探索並安裝它的 skills:

bash
dart run skills@ get

若要了解如何探索與安裝套件 skills,請參閱 套件 skills。 若要將 skills 與你自己的套件一起打包,請參閱 隨套件發布 skills。


專用 agents

#

專用 agents(在 Antigravity 等平台中稱為自訂 agents)是配置了專屬系統提示、 精選工具組與專注 skill 子集的 AI 助理。

Agent skills 在實際撰寫程式碼時引導通用型助理, 而專用 agents 則在獨立的情境中執行深入且單一目的的工作流程, 不會干擾你的主要對話紀錄。

Flutter Accessibility agent

#

Flutter Accessibility (a11y) agent 是一個官方的專用 agent, 用於稽核 Flutter 元件樹 (widget tree) 並建議無障礙改進方案。 Accessibility agent 目前可在 Google Antigravity 中使用。

Accessibility agent 的主要功能包括:

  • 語意標籤檢查:找出缺少描述性語意標籤的互動元件 (例如 IconButton 或 InkWell)。
  • 觸控目標驗證:標示出點擊測試區域小於建議的 48x48 邏輯像素的互動元素。
  • 對比與視覺檢查:標示潛在的對比度問題與缺少的焦點指示器。
  • 自動化程式碼修正:產生符合慣用寫法的 Flutter 修正 (例如以 Semantics 包覆元件或調整點擊範圍),供你檢視並接受。

在 Antigravity 中使用 accessibility agent

#

在 Antigravity 中安裝官方的 Dart and Flutter plugin 後, 你可以在與 Antigravity 對話時直接呼叫 accessibility agent: 從 agent 選擇器中選取 Flutter Accessibility Agent、提及 @flutter_a11y_agent, 或請助理檢視你的程式碼是否符合無障礙要求:

@flutter_a11y_agent Audit this screen for accessibility issues.

Agent rules

#

Agent rules 是每次你與助理開啟新工作階段時, 都會加入情境視窗的持久性規則。 這些規則為整個程式碼庫建立專案慣例與常見限制。

若要探索官方 Flutter rules,請前往 flutter/agent-plugins 儲存庫中的 rules 目錄。


何時使用哪一種

#

你可以用下列心智模型來理解不同的 AI 機制如何相互運作:

機制範圍與行為最適用於
Agent skill 依需求載入 多步驟的做法、模式
Dart MCP server 本機 SDK 工具 診斷、測試、執行階段
Developer Knowledge MCP 線上搜尋 最新文件、API 參考文件
套件 skill 來自相依套件 函式庫 API、程式碼產生
專用 agent 獨立的 subagent 無障礙稽核
Agent rule 持久性情境 專案慣例、限制

後續步驟

#