今日，Flutter 官方正式發布了它們關于 AI 大模型的 package 項目： genui ，它是一個非常有趣和前沿的探索類型的項目，它的目標是幫助開發者構建由生成式 AI 模型驅動的動態、對話式用戶界面：

也就是它與傳統 App 中“寫死的”靜態界面不同，是一個可以基于 AI 模型，支持由 AI 根據與用戶的實時對話動態生成 UI 的 SDK 。

當然，它并不是一個完全 Free 的動態 UI 項目，雖然看起來它是動態的，甚至可以用來做熱更新，但是實際上也是存在限制條件。

首先它的作用是：應用能夠實時渲染由 AI 返回的結構化數據 ，也就是 JSON 數據，所以實際上 flutter_genui 是一個基于文本描述，然后經過 AI 返回結構化數據進行渲染驅動的過程:

在 SDK 里，主要是通過一個名為 UiAgent 的接口，它負責管理與 AI 之間的交互循環，簡化了開發流程

而對于 UI ，開發者可以定義一個 AI “允許使用” 的 Flutter Widget 詞匯表 Catalog ，AI 將基于這個 Catalog 來構建 UI，比如官方的 Demo 就提供了類似的 catalog 目錄來限制 UI 風格：

具體來說，就是定義好的各種 CoreCatalogItems 通過 GenUiManager 的 catalog 配置，讓 AI 知道應該用哪些組件來生成需要的 UI ：

這其中 CatalogItem 就像是每個 Widget 的“角色卡”，它核心規定了三件重要的事情：

• name: Widget 的名字（例如 “Column”, “Text”, “ElevatedButton”），這是給 AI 看的，AI 會通過這個名字來指定使用哪個 Widget
• dataSchema: 一個 Schema 對象，它用 JSON Schema 的格式，精確定義了這個 Widget 需要的所有參數，包括參數名、類型（字符串、數字、布爾等）和是否必需，這為 AI 提供了結構化的指令
• widgetBuilder: 它負責接收 AI 返回的、符合 dataSchema 規范的 JSON 數據，并將其真正地渲染成一個 Flutter Widget

如果么有定義任何自定義組件，而是直接使用了 CoreCatalogItems.asCatalog() ，那么 AI 在生成 UI 時就只能使用 flutter_genui 內置的最核心的幾個基礎組件。

具體效果如下圖所示，甚至在整個過程中，flutter_genui 能夠捕捉用戶的交互行為（如按鈕點擊、文本輸入），并將這些事件作為上下文信息發送回 AI，以便 AI 在下一輪對話中做出響應：

而對于 flutter_genui，主要的核心對象有：

• UiAgent (門面): 這是開發者主要交互的入口點，它封裝了 GenUiManager 和 AiClient，是整個流程的協調者。
• Catalog (Widget 目錄): 定義了 AI 可以使用的 Widget 集合，每個 CatalogItem 包含 Widget 的名稱、數據結構（Schema）和渲染它的構建函數
• AiClient (AI 客戶端): 負責與大語言模型通信的接口，GeminiAiClient 是其針對 Gemini 模型的具體實現，可以拓展支持其他模型
• GenUiManager (UI 狀態管理器): 管理所有動態生成的 UI 界面（稱為 “Surfaces”）的狀態，它提供了 addOrUpdateSurface 和 deleteSurface 等工具供 AI 調用，并通過流（Stream）將更新通知給 UI
• GenUiSurface (UI 渲染器): 一個 Flutter Widget，負責根據 GenUiManager 提供的 UiDefinition 遞歸地構建和渲染整個 UI 樹

比如以下是一個簡單的例字，展示了如何使用 UiAgent：

import 'package:flutter/material.dart';
import 'package:flutter_genui/flutter_genui.dart';void main() {// 初始化 Firebase 等runApp(const MyApp());
}class MyApp extends StatefulWidget {const MyApp({super.key});@overrideState<MyApp> createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {late final UiAgent _uiAgent;final List<GenUiUpdate> _updates = [];@overridevoid initState() {super.initState();_uiAgent = UiAgent('You are a helpful AI assistant that builds UIs.',catalog: CoreCatalogItems.asCatalog(),onSurfaceAdded: _onSurfaceAdded,);}void _onSurfaceAdded(SurfaceAdded update) {setState(() {_updates.add(update);});}void _sendPrompt(String text) {if (text.trim().isEmpty) return;_uiAgent.sendRequest(UserMessage.text(text));}@overridevoid dispose() {_uiAgent.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('GenUI Demo')),body: Column(children: [Expanded(//  渲染動態 UI 界面child: ListView.builder(itemCount: _updates.length,itemBuilder: (context, index) {final update = _updates[index];return GenUiSurface(host: _uiAgent.host,surfaceId: update.surfaceId,onEvent: (event) {// UiAgent 會自動處理事件},);},),),// 聊天輸入框 Widget ，調用 _sendPrompt// ····],),),);}
}

另外，在前面我們說過，AI 返回的是一個結構化的 JSON 數據，而對于 genui 來說，他底層會有一個dart_schema_builder 的基礎工具包支持，它的核心作用是讓你能夠用 Dart 代碼來創建和驗證 JSON Schema：

可以把它理解成一個“翻譯器”，在 flutter_genui 的世界里，AI 需要知道它有哪些 UI 組件 (Widgets) 可以使用，以及每個組件需要哪些參數，這些規則就是通過 JSON Schema 來定義

簡單說，它的作用是：

• 用 Dart 構建 JSON Schema: 開發者不需要手動編寫復雜的 JSON 文件來定義規則，而是可以通過 Dart 的鏈式調用來構建，例如，你可以定義一個“卡片”組件，規定它必須有一個 title (字符串類型) 和一個 description (也是字符串)，還有一個可選的 imageUrl
• 數據驗證: 它可以根據你定義的 Schema 來驗證一個 JSON 對象是否合法，這在接收 AI 返回的數據時至關重要，可以確保 AI 給出的 UI “指令”是完整且格式正確的，避免程序因數據格式錯誤而崩潰
• 為 AI 提供“工具”的藍圖: flutter_genui 會將使用 dart_schema_builder 創建的 Schema 發送給大語言模型，這等于告訴 AI：“你可以使用這些工具（Widget），每個工具的參數和格式必須遵守這份說明書。”

也就是，對于 genui 底層，會使用 dart_schema_builder 為 Flutter Widgets (例如 InformationCard, ItineraryDay) 定義好 Schema，將這些定義好的 Widgets 注冊到 flutter_genui 的 Catalog 。

之后用戶輸入文本，UiAgent 啟動，AiClient 將對話和從 Catalog 中提取的 Schemas 發送給 LLM，LLM 返回一個符合某個 Schema 的 JSON 指令，UiAgent 和 GenUiManager 解析該指令，更新 UI 狀態。

最后 GenUiSurface 監聽到狀態變化，使用 Catalog 中的構建函數，將 JSON 數據渲染成用戶可見的 Flutter 界面。

所以最終 UI 是通過 GenUiManager + GenUiSurface 渲染出來，具體大概流程為：

• GenUiManager 負責管理所有 UI 界面的當前狀態，內部有一個 _surfaces map，用來存儲所有 UI 界面（Surface）的定義，每個 Surface 都有一個唯一的 surfaceId，其對應的值是一個 ValueNotifier<UiDefinition?>，這意味著當 UiDefinition 改變時，可以通知監聽者

• 在 AI 更新時，GenUiManager 會更新 _surfaces map 中對應 surfaceId 的 UiDefinition，然后通過一個 StreamController (_surfaceUpdates) 發出 SurfaceAdded 或 SurfaceUpdated 事件，這個廣播是 UI 能夠自動重建的關鍵。

• GenUiSurface 是一個 StatefulWidget，它是將抽象的 UiDefinition 渲染為用戶可見界面的最終執行者，它監聽了 surfaceId 的 ValueNotifier ，并有一個遞歸 _buildWidget 函數

• GenUiSurface 會從根 widget ID 開始，從 UiDefinition 中查找 widget 的 JSON 數據，然后調用 widget.host.catalog.buildWidget 方法，buildWidget 方法會找到對應的 CatalogItem 并執行其 widgetBuilder，從而創建出 Flutter Widget

所以可以看到，genui 的核心是利用 AI 大模型的 UI 組織能力，讓它通過用戶的描述和已有的控件目錄，動態渲染和生成所需的 UI 控件。

話說回來，這里說到 AI 生成的核心產物是 UiDefinition 對象，它本質上是一個 JSON 結構，JSON 作為純文本數據其實是可以保存的，比如我們對這部分數據進行攔截緩存，并在啟動時加載渲染，實際上這也是一個有限能力的熱更新模型。

另外，目前使用 flutter_genui 最方便的默認實現是基于 Firebase 使用默認的 FirebaseAiClient ，它實現了與 Firebase AI（特別是 Gemini 模型）進行通信的支持，官方默認提供的 simple_chat 和 travel_app 都是使用它。

你也可以在通過 AiClient 抽象接口實現自己自定義的 client 。

所以，你覺得 genui 有前景嗎？