Getting started

Flow UI is an open-source Flutter UI library to build production-grade Chat & AI assistant interfaces — a plain Flutter package, no codegen, no transitive dependency tree. Its components draw the conversation state you hand them and report what the user did through callbacks; everything model-shaped stays in your app.

Install

One line in your pubspec — the package depends on nothing but the Flutter SDK:

pubspec.yaml

dependencies:
  flow_ui: ^0.1.0

Wire the theme

The design tokens — colors and typography — install as a ThemeExtension:

main.dart

MaterialApp(
  theme: ThemeData(extensions: [FlowTheme.light()]),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    extensions: [FlowTheme.dark()],
  ),
)

Tip

Zero setup also works: when no FlowTheme is installed, components fall back to a preset matched to the ambient ThemeData.brightness.

Figtree — the face the design system is set in — ships inside the package, so there is nothing to add to your own pubspec.yaml fonts section.

Render a conversation

Messages are plain data; FlowThread draws them:

A three-role conversation

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 to build production-grade Chat & AI assistant interfaces...',
    ),
    FlowMessageData.text(
      id: '3',
      role: FlowMessageRole.system,
      text: 'Model changed to Sonnet',
    ),
  ],
)

Streaming is data, not streams: as chunks arrive, rebuild with the updated message list and a status of FlowMessageStatus.streaming — the thread animates the reveal.

Run the playground

Every component has a live stage in the hosted playground — variant pills and code snippets included. It is also in the repo to run locally:

cd playground && flutter run -d chrome

For a minimal starting point, the repo’s example/ is the full chat screen from the README as a single-file app: generate platform runners once with flutter create . --platforms=web, then flutter run -d chrome.

Next

ThemingThe token system: three levels of ink, translucent washes on opaque grounds, and how the M3 mapping works.

Message & ThreadConversation rendering — roles, streaming, pending and error states.