Flutter

【文章翻譯】Rich and dynamic user interfaces with Flutter and generative UI

【文章內容使用 Gemini 2.5 Flash 自動翻譯產生】

Introducing the GenUI SDK for Flutter

我們很高興地介紹 Flutter 的 GenUI SDK，現已在 pub.dev 上以 Alpha 版提供。這個新的 Flutter SDK 協助您使用 Gemini (或其他 LLM) 生成動態、個人化的 UI，顯著提升 GenAI 和基於代理的使用者體驗的可用性和滿意度，同時也遵守您既定的品牌指南並使用您自己的 Widget 目錄。

當今的應用程式使用者不僅期望美觀快速的 UI，還期望更動態、深度個人化和自適應的體驗。我們正在建構 Flutter 的 GenUI SDK，這是一套套件，旨在讓您更容易地為所有使用者建構和交付新一代的體驗。

從傳統聊天機器人到動態、互動式、圖形化體驗

一個使用 Flutter 和 Gemini 建構的強大生成式 UI 體驗的絕佳範例是 Gemini 應用程式中新的實驗性 視覺佈局 功能（App Store，Play Store），該功能今天推出。它生成了一個身臨其境的雜誌風格資訊視圖，其中包含照片和模組。這些生成元素不僅看起來很棒，而且是互動式的，可幫助您進一步自訂體驗。Gemini 的新視覺佈局功能啟發了我們建構 Flutter 的 GenUI SDK，以便任何人都可以建立相同類型的動態、互動式、生成式體驗。

Flutter 的 GenUI SDK 如何運作？

GenUI SDK for Flutter 的核心是一個協調層。它協調使用者、您的 Flutter 小工具和 AI 代理之間資訊流動，將基於文字的對話轉化為豐富的互動式體驗。

Diagram of agentic loop for the GenUI SDK for Flutter
  1. 應用程式發送請求： 使用者提供一個提示（例如，「幫我規劃東京之旅！」）。您的應用程式使用提示以及有關其可以用來回應和組合成的 Widget 目錄的額外資訊呼叫您的 AI 代理。
  2. AI 代理生成內容和要顯示的 UI： AI 代理生成響應，但它不僅僅依賴文字，它還使用 GenUI SDK 提供的工具來描述最適合其生成內容的 UI。
  3. UI 動態渲染： GenUI SDK 接收響應，將其反序列化，並構建適當的 Widget。有些是資訊性的，有些是佈局，有些可以是互動式的（並且可能包括滑塊、按鈕或日期選擇器）。
  4. 使用者與動態 UI 互動： 使用者點擊按鈕和其他控制項，這可以觸發對代理的後續請求，從而導致更多的 UI 更新等等。

這個循環使您能夠超越簡單的文字回應。透過定義您自己的自訂 Widget，GenUI SDK for Flutter 可確保動態生成的 UI 符合您的品牌指南。

有關 Flutter 的 GenUI SDK 的更詳細說明和逐步說明，請查看以下影片：

幕後的 UI 協定

Flutter 的 GenUI SDK 是基於與 Google 的 A2A 團隊和 Google Labs 的 Opal 團隊合作的 即將推出的 A2UI 協定 建構的。A2UI 是一個新的（即將開源）工具包，旨在促進在任何框架中實作 LLM 生成的 UI。我們使用 A2UI 作為 LLM 生成的 UI 的序列化格式，而 Flutter 的 GenUI SDK 正在使用 A2UI 渲染器的早期版本。

我該如何開始建構 GenUI 體驗？

我們希望讓您輕鬆嘗試使用 GenUI SDK for Flutter，因此我們已捆綁了適用於 LLM 的內容生成器、用於實際操作的範例應用程式和用於編碼代理（以及人類！）的 markdown 文件。

  • 首先，取得 genui 的主要 pub 套件。
  • 接下來，選擇一個內容生成器。以下是我們提供的內容生成器選項，支援各種使用案例：
    • Google Gemini API：在您規劃體驗時，對於實驗和本地測試很有用。
    • Firebase AI logic：對於與 LLM 的互動完全在您的 Flutter 用戶端中進行的生產應用程式很有用，無需伺服器。Firebase 也使得安全地交付您的 AI 功能變得更容易，因為 Firebase 處理您的 Gemini API 金鑰的管理。
    • A2UI：對於代理在伺服器上運行的客戶端/伺服器架構很有用。
    • 自建：當然，您也可以建構自己的轉接器以連接到您偏好的 LLM 提供者。預計我們和社群很快會提供更多內容。

為了讓您的編碼代理能夠輕鬆地使用 Flutter 的 GenUI SDK 進行建構，我們還包含了 markdown 文件。這些 markdown 文件教您的編碼代理如何使用各種 GenUI SDK API。

flutter/genui 儲存庫 包含您可以使用的範例應用程式，可為您提供建構 GenUI 體驗的良好起點。以下影片展示了 Landscape design app，它為您提供了 Flutter 客戶端與使用 A2A（Agent-to-Agent）和 ADK 的基於 Python 的伺服器互動的範例，其中 AI 代理動態生成 UI。在此演示應用程式中，使用者可以上傳其庭院的圖片，Gemini 會對其進行分析，然後透過 Flutter 的 GenUI SDK 提供自訂 UI，供使用者輸入其更新庭院景觀的限制和要求。一旦使用者輸入其偏好設定，他們就會看到一個考慮到其選擇的結果。此應用程式演示了基於 GenUI 的體驗如何改善人與代理之間的協作。

Landscape design app demo

接下來會發生什麼？

我們正在建構 Flutter 的 GenUI SDK，以幫助您透過單一程式碼庫在行動、網頁和桌面平台上提供個人化、動態、AI 驅動的應用程式體驗。以下是我們正在考慮納入路線圖的一些事項：

  • 代理開發套件 (ADK) 外掛： ADK 的交鑰匙整合。
  • 擴展的 LLM 框架支援： 針對其他流行 AI 模型和後端框架的官方適配器。
  • 降低感知延遲： 隨著 LLM 生成標準 UI 組件，逐步渲染它們，而不是等待完整的響應。
  • 全螢幕組合： 超越串流中的單個小工具，讓 LLM 根據使用者意圖組合整個螢幕佈局並處理複雜的應用程式導航。
  • Dart 位元組碼： 提供真正的伺服器驅動 UI，允許後端透過網路發送全新的小工具邏輯，而不僅僅是您二進制檔案中已有的小工具的配置。
  • Genkit 整合： 與 Genkit（一個開源 AI 框架）整合。

該專案仍處於早期階段，因此我們很高興聽到您的想法和 回饋。我們迫不及待想看看您使用 Flutter 建構的 GenUI 體驗！

使用 Flutter 和生成式 UI 打造豐富動態的使用者介面 最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。