在 Firebase Studio 中,Flutter 開發變得更加智慧了!在 I/O Connect India 大會上,我們推出了由 AI 驅動的新功能,旨在為您提供更自動化、更高效的工作流程。在這篇文章中,我們將深入探討 Firebase Studio 中專為 Flutter 設計的全新 AI 增強功能,並向您展示如何利用它們來構建強大的應用程式,就像我們在舞台上展示的演示一樣。
升級 AI 優化 Flutter 模板
Firebase Studio 中的 Flutter 模板獲得了重大升級。憑藉其新的 AI 功能,您可以優化工作區,獲得 AI 優先的體驗。例如,在使用這個新模板構建 I/O Connect India 演示時,Firebase Studio 生成了一個多螢幕電子商務應用程式,包括狀態管理、Firebase 身份驗證、產品、購物車和結帳。AI 優化模板預設為自主代理模式,允許 Gemini 直接進行更改,無需等待批准。我們還將 Gemini 的規則整合到一個(自動生成的)airules.md 文件中,以進一步完善 Gemini 生成的程式碼,使您能夠以更簡化的流程添加功能或生成整個 Flutter 應用程式。
Firebase Studio 中的 Flutter 模板已升級,提供 AI 優先的體驗
自主進行更改
以前,在 Firebase Studio 中處理 Flutter 專案時,您需要手動批准代理模式下的每個程式碼更改。現在這個工作流程已經顯著發展,可以自主(獨立且自動)進行編輯。透過新的代理 (Auto-run) 模式,Gemini 現在可以自主進行更改、生成整個應用程式,並以簡化的流程添加功能。例如,在開發類似於我們的 I/O Connect India 演示應用程式時,您可以使用代理 (Auto-run) 模式在單次互動中無縫整合 Firebase 後端服務並實作複雜的導航模式。鑑於 Gemini 對 Dart 和 Flutter 的強大支援,這種自主模式讓您保持在開發流程中。如果更改與您的預期不完全一致,請放心,Firebase Studio 利用 Git,允許您快速將更改回復到先前的提交。
Firebase Studio 中 Flutter 專案的代理 (Auto-run) 模式
AI 規則
透過升級後的 Flutter 模板,我們將 AI 指令整合到一個新文件:airules.md 中。這個文件(位於專案的根目錄)包含 Gemini 在生成程式碼時要遵循的明確規則,從而提高輸出的品質和相關性。您可以靈活地使用預設的 AI 規則或根據專案的特定需求自訂它們。雖然有很多規則,但這裡有幾個範例:
充當 Flutter 共同開發人員
撰寫單元測試
主動尋找並修復錯誤
選擇要使用的主題、工具、擴充功能和啟動命令
新增和移除 Flutter 套件
遵守 Flutter 和 Dart 程式碼品質的最佳實踐
設定複雜的導航
Firebase Studio 中預設 Flutter AI 規則 (airules.md) 概述
相容於 Dart MCP 伺服器
Firebase Studio 現在包含了對模型上下文協定 (MCP) 的基礎支援,我們很高興地分享它與我們的 Dart MCP 伺服器 協同工作。當整合到 Firebase Studio 中時,Dart MCP 伺服器使 Firebase Studio 中的 Gemini 能夠分析並自動修復專案程式碼中特定於 Dart 和 Flutter 的錯誤。您還可以高效地在 pub.dev 上搜尋最佳套件、管理 pubspec.yaml 中的依賴項、運行測試等等。例如,在構建類似於我們在 I/O Connect India 舞台上演示的 Flutter 應用程式時,Gemini 應該能夠識別並自主糾正靜態和運行時錯誤。目前,Dart MCP 伺服器處於 beta 階段。
AI 開發的格局正在迅速演變,強大的代理能夠協助開發人員完成各種任務。為了真正釋放它們的潛力,這些代理需要存取超越其固有能力的上下文和工具。這就是 Model Context Protocol (MCP) 的作用,它充當標準化的外掛系統,將 AI 模型連接到外部系統和資料來源。Dart MCP Server 是我們針對 Dart 和 Flutter 生態系統實施此標準的成果。
本文探討如何利用 Dart MCP Server 來增強您的 Dart 和 Flutter 開發體驗。我們將介紹 Dart MCP Server 提供的實用工具,並展示如何配置伺服器以用於 Gemini CLI、VS Code 中的 Gemini Code Assist、Cursor 和 VS Code 中的 GitHub Copilot 等常用工具。
Dart MCP Server 的真正力量在於它如何讓 AI 助理和代理不僅能夠推斷您專案的上下文,還能透過工具採取行動。大型語言模型 (LLM) 決定使用哪些工具以及何時使用,因此您可以專注於用自然語言描述您的目標。讓我們透過幾個使用 VS Code 中 GitHub Copilot Agent 模式的範例來看看實際應用。
修正執行時佈局錯誤
我們都經歷過這種情況:您建立了一個漂亮的 UI,運行應用程式,卻看到臭名昭昭的 RenderFlex 溢出錯誤的黃黑條紋。現在,您無需手動調試 Widget 樹,而是可以向 AI 助理尋求協助。
GitHub Copilot 是一個整合到 VS Code 中的 AI 程式碼助理。Dart VS Code 擴充功能透過向 VS Code 註冊 Dart MCP Server 來為 Copilot 提供簡單的整合。Copilot 或任何其他支援 VS Code MCP API 的 AI 代理會自動為您配置 Dart MCP Server,因此您無需手動操作。
若要設定 Cursor 以使用 Dart MCP Server,您可以點擊 Dart MCP Server README 檔案中的 Add to Cursor 按鈕(最簡單的方法),或依照官方 Cursor 文件中的說明 安裝 MCP 伺服器。設定 Dart MCP Server 後,您的 .cursor/mcp.json 檔案中應該會出現以下內容,該檔案可以是 專案檔案或全域檔案,具體取決於您希望啟用 MCP 伺服器的位置:
1 2 3 4 5 6 7 8 9 10 11 12
{ "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 ] } } }
// Code without null-aware elements var listWithoutNullAwareElements = [ if (promotableNullableValue != null) promotableNullableValue, if (nullable.value != null) nullable.value!, if (nullable.value case var value?) value, ];
一個具有 null-aware 元素,並移除 null 值的列表:
1 2 3 4 5 6
// Code with null-aware elements var listWithNullAwareElements = [ ?promotableNullableValue, ?nullable.value, ?nullable.value, ];
/// Doc comments can now reference elements like /// [Future] and [Future.value] from `dart:async`, /// even if the library is not imported with an /// actual import. classFoo{}
文件導入支援與常規 Dart 導入相同的 URI 風格,包括 dart: 方案、package: 方案和相對路徑。但是,它們不能使用 as、show、hide 延遲或配置。
Firebase 控制台中的全新 AI 監控儀表板提供您 Gemini API 使用情況的詳細且可行的洞見。這包括全面了解消耗模式、效能指標和潛在問題。這能讓您做出資料驅動的決策,並確保您以最有效的方式使用 Gemini API。AI 監控還有助於您偵錯 Gemini API 的使用情況,並識別和解決任何非預期的行為。