Flow UI：把 AI 聊天界面拆成 20 个 Flutter 组件

在 Flutter 里做一个像样的 AI 聊天界面，自己从零拼的话要处理的碎活不少：流式输出的文字渐显、思考中的呼吸动画、Markdown 和代码块的渲染、失败重试的气泡、附件预览、模型选择菜单。Flow UI 把这些拆成了 20 个现成组件，一个 pub 依赖装完就能用。出品方 StacDev 是做 Flutter SDUI 框架 Stac 的团队。

项目简介

Flow UI（包名 flow_ui）是开源的 Flutter UI 库，专做生产级聊天和 AI 助手界面。MIT 协议，2026 年 8 月初发布在 pub.dev，目前 0.2.0 版本。它是个非常克制的包：无 codegen，零传递依赖，只依赖 Flutter SDK 本身，连默认字体 Figtree 都是打包内置的（SIL 开源字体协议），不用你去 pubspec 里配 fonts。

盒子里有什么

20 个组件按用途大致分三块。

聊天主体：FlowChatView 是完整聊天面（消息流加输入框、零状态引导语、回到底部按钮），也可以用 FlowThread 和 FlowComposer 自己组合。FlowMessage 画单轮对话，用户消息是墨洗气泡，助手消息纯排版，失败自动换成错误气泡。

AI 场景专属的细节件：FlowStreamingText 做流式回复的渐显动画，FlowThinkingIndicator 是旋转呼吸的星号加微光标签，FlowMarkdown 内置解析器渲染标题、列表、表格、引用，流式状态下渲染得也优雅，FlowCodeBlock 自带同步高亮和复制按钮，语言列表还可扩展。

周边交互：FlowMessageActions 提供复制/重新生成/编辑/反馈一行按钮，FlowModelSelector 是带 effort 子菜单的模型选择器，FlowAttachmentGroup 和 FlowAttachmentPreview 管图片和文件的缩略与全屏查看，FlowSuggestion 画提示词起点。桌面端菜单走锚定卡片，手机端自动落成底部弹层。

两个值得学的设计决定

消息是纯数据。 组件只负责把你交给它的会话状态画出来，用户做了什么通过回调上报；网络、模型、状态管理全留在你的应用里。库不绑架你的架构。

流式是数据，不是流。 不是让你把 Stream 塞给组件，而是 chunk 到达时用 copyWith 重建消息列表、状态标成 streaming，FlowThread 自己处理锚定和动画。空内容的 pending 消息会自动渲染成思考指示器，收完把状态改成 complete 就完事。你的后端对接代码保持普通的 setState 风格，不被迫改成响应式。

上手

dependencies:
  flow_ui: ^0.2.0

主题是可选的。装了 FlowTheme（一个 ThemeExtension，带明暗两套预设）就完全按设计系统走；不装也不报错，组件回退到跟随系统亮度的内置预设。官网每个组件都有 live playground，变体和代码片段齐全，先在浏览器里试再写代码。

注意事项

• pre-1.0 阶段，API 还在定型，小版本可能有破坏性变更：锁死小版本号，升级前看 changelog
• 目前 30 stars，项目很新，赶生产项目的话做好自己兜底改代码的准备
• 组件面向聊天场景，通用 UI（表单、表格这类）不在它的范围里，别指望拿它当整套设计系统

项目链接

• GitHub 仓库：https://github.com/StacDev/flow_ui
• 文档：https://flowui.stac.dev
• pub.dev：https://pub.dev/packages/flow_ui