字节笔记本
2026年8月27日
flow_ui：用 Flutter 快速搭出生产级 AI 聊天界面的开源组件库
本文介绍 StacDev 开源的 flow_ui，一个用 Flutter 构建 AI 聊天和助手界面的 UI 组件库。它把"对话界面长什么样"和"模型怎么响应"彻底分开：组件只负责画状态、报回调，模型相关的逻辑全部留在你的应用里。
项目简介
flow_ui 今年 8 月发布，目前版本 0.2.0，MIT 协议，代码在 GitHub（StacDev/flow_ui）。这个团队此前做的就是 Stac——用 JSON 驱动 Flutter UI 的框架，做声明式组件库算是他们的老本行。
它给自己的定位有几个关键词：production-grade（生产级）、plain Flutter package（无代码生成）、no transitive dependency tree（除 Flutter SDK 外零传递依赖）。对一个 UI 库来说，最后这条挺难得——引一个包不会顺手拖进一堆第三方依赖。
设计思路
flow_ui 的组件是"哑"的：你把会话状态递给它，它画出来；用户做了什么操作，它通过回调告诉你。流式输出、工具调用、重试这些逻辑都由你的应用层掌控，库不绑架你的数据流。
主题通过 ThemeExtension 接入：颜色和排版做成 FlowTheme，挂进 MaterialApp 即可。设计系统用的 Figtree 字体直接打包在库里，不用往 pubspec 的 fonts 段加东西。不装 FlowTheme 也能跑——组件会按当前 ThemeData.brightness 回退到预设样式。
安装指南
前置要求：Dart SDK ^3.12.2、Flutter >= 3.44.0（要求比较新）。
pubspec.yaml 一行搞定：
dependencies:
flow_ui: ^0.2.0快速开始
接入主题
MaterialApp(
theme: ThemeData(extensions: [FlowTheme.light()]),
darkTheme: ThemeData(
brightness: Brightness.dark,
extensions: [FlowTheme.dark()],
),
)渲染一段三方会话
消息就是普通数据，交给 FlowThread 画出来：
FlowThread(
messages: [
FlowMessageData.text(
id: '1',
role: FlowMessageRole.user,
text: 'What is flow_ui?',
),
FlowMessageData.text(
id: '2',
role: FlowMessageRole.assistant,
text: 'An open-source Flutter UI library...',
),
FlowMessageData.text(
id: '3',
role: FlowMessageRole.system,
text: 'Model changed to Sonnet',
),
],
)user / assistant / system 三种角色各归其位，system 提示（比如切换模型的通知）有独立的呈现方式，不用自己 hack 进消息列表。
适用场景
- 给自家 App 加 AI 助手入口，不想从气泡布局、输入框状态机开始手写
- 多模型客户端：UI 层与具体模型解耦，换后端不动界面
- 快速搭 Demo 或内部工具的对话界面，再按需替换个别组件
官方仓库带 playground 示例工程，clone 下来跑一遍比看文档直观。
注意事项
- 版本还早（0.2.0），API 大概率会变，锁版本升级
- 要求 Flutter 3.44+，老项目先看升级成本
- 组件覆盖的是聊天主流程，富媒体消息、复杂卡片类需求要看文档确认支持程度