UI Kits / Chat

Chat UI Kit (Flutter)

Room-based realtime chat with ready-made screens (team chat, live comments, compact panel), deep theming, and bring-your-own design. Package: baxcloud_chat_uikit_sdk · v0.1.0.

Overview

Every session joins a BaxCloud room. The kit fetches a token, sends via the HTTP messages API, and receives broadcasts on the realtime data channel.

Ready-made modes

Chat screen, live comments overlay, compact side panel — plus full BYO chrome.

Deep theming

Colors, radii, fonts, fade edges, input chrome — override anything via copyWith.

i18n join / leave

Toggle presence messages and supply {name} templates or builders for translations.

Chat always requires a roomName. Enable project auto-create rooms or create the room via REST before joining.

No chat history on BaxCloud. Messages are realtime only and are not stored after the session. If you need history, persist with onMessage and restore with initialMessages in your own database — see Message persistence.

Installation

1dependencies:
2  baxcloud_core: ^0.1.4
3  baxcloud_chat_uikit_sdk: ^0.1.0

1flutter pub get

Quick start

1await BaxChats.initialize(
2  config: BaxConfig(projectId: '...', apiKey: 'bax_pk_...'),
3  localUser: const BaxcloudUser(userId: 'u1', name: 'Ada'),
4);
5
6BaxChatView(
7  roomName: 'support-lobby',
8  user: const BaxcloudUser(userId: 'u1', name: 'Ada'),
9  uiConfig: BaxChatUiConfig.standard(),
10);

Ready-made modes

Presets for common product surfaces

Preset	Use case	Highlights
`BaxChatUiConfig.standard()`	Full chat screen	Header, bubbles, input, join/leave on
`BaxChatUiConfig.liveOverlay()`	Live stream comments	Transparent bg, top edge fade, translucent bubbles
`BaxChatUiConfig.compact()`	Side panel / embed	Dense chrome, no header / reactions

1// Live comments over your video widget
2Stack(
3  children: [
4    MyLiveVideo(),
5    Align(
6      alignment: Alignment.bottomCenter,
7      child: SizedBox(
8        height: 280,
9        child: BaxChatView(
10          roomName: 'live-123',
11          user: me,
12          uiConfig: BaxChatUiConfig.liveOverlay().copyWith(
13            edgeFade: BaxChatEdgeFade.top,
14            joinedTextTemplate: '{name} joined the stream',
15          ),
16        ),
17      ),
18    ),
19  ],
20);

Join / leave messages

Toggle + translate presence lines

1BaxChatUiConfig.standard().copyWith(
2  showJoinMessages: true,
3  showLeaveMessages: true,
4  showSystemMessages: true, // render system bubbles
5  // Simple template ({name} replaced):
6  joinedTextTemplate: '{name} entrou',
7  leftTextTemplate: '{name} saiu',
8  // Or full builder for complex i18n:
9  joinedTextBuilder: (name) => AppLocalizations.of(context)!.userJoined(name),
10  leftTextBuilder: (name) => AppLocalizations.of(context)!.userLeft(name),
11);

showJoinMessages / showLeaveMessages control whether events are generated. showSystemMessages controls whether system bubbles are painted.

Customization surface

Theme, partial chrome, or full BYO screen

1. Theme / layout (BaxChatUiConfig)

Colors: background, bubbles, text, input, accent, system message, dividers
Radii: bubble, bubble tail, input, send button, system chip, avatar
Typography: message / sender / timestamp / system / reaction sizes
Edge fade: BaxChatEdgeFade.none | top | bottom | both + edgeFadeExtent (messages dissolve at the edge)
Visibility toggles: header, avatars, timestamps, input, reactions, leave button
i18n strings: input hint, empty state, connected / connecting, leave tooltip

1BaxChatUiConfig.standard().copyWith(
2  backgroundColor: Color(0xFF0B1220),
3  localBubbleColor: Color(0xFF7C3AED),
4  bubbleBorderRadius: 20,
5  bubbleTailRadius: 4,
6  edgeFade: BaxChatEdgeFade.top,
7  edgeFadeExtent: 56,
8  showTimestamps: true,
9);

2. Partial chrome builders

1BaxChatView(
2  roomName: room,
3  user: me,
4  messageBuilder: (context, message) => MyBubble(message: message),
5  inputBuilder: (context, controller, onSend) => MyInput(onSend: onSend),
6);

3. Full custom screen

1BaxChatView(
2  roomName: room,
3  user: me,
4  inChatBuilder: (context, session) {
5    return Column(
6      children: [
7        MyHeader(room: session.roomName, onLeave: session.leave),
8        Expanded(child: session.chatSurface),
9      ],
10    );
11  },
12);

Controller

1await BaxChats.instance.activeController?.sendText('Hello!');
2await BaxChats.instance.activeController?.sendReaction('👍');
3final messages = BaxChats.instance.activeController?.messages ?? [];

Message persistence

BaxCloud does not store chat history — save and restore in your own database

Chat is a realtime transport. Messages are broadcast to connected participants and are not retained after the session. Use onMessage to write each message to your DB, and initialMessages (or controller.seedMessages) to show history when a user rejoins.

1// 1) Load history from your API / DB before opening chat
2final rows = await myApi.fetchMessages(roomId: 'support-lobby');
3final history = rows
4    .map((row) => BaxChatMessage.fromJson(row, isLocal: row['senderId'] == me.userId))
5    .toList();
6
7BaxChatView(
8  roomName: 'support-lobby',
9  user: me,
10  initialMessages: history, // shown in UI; does NOT re-fire onMessage
11  onMessage: (message) {
12    if (message.type == BaxChatMessageType.system) return; // optional filter
13    unawaited(myApi.saveMessage(message.toJson()));
14  },
15);

message.toJson() is ready for storage. Deduplicate by id on your side. Seeded messages are sorted by timestamp and skipped if the same id is already in the list.

BaxChatView options

roomName — BaxCloud room (required)
user — BaxcloudUser
uiConfig — preset + copyWith
messageBuilder / inputBuilder / inChatBuilder
onMessage — persist each new message to your DB
initialMessages — prefill from your DB
onLeave, loadingWidget, errorBuilder

Troubleshooting

Messages not on other device

Same roomName, client key messaging scopes, room active / auto-create on.

No join / leave lines

Enable showJoinMessages / showLeaveMessages and showSystemMessages.

Example app demos

The bundled example includes: Chat screen, Live streaming comments, Compact side panel, and Bring your own chrome.

1cd SDK/UIKIT/flutter/baxcloud_chat_uikit_sdk/example
2flutter run --dart-define=BAXCLOUD_PROJECT_ID=your_project \
3  --dart-define=BAXCLOUD_API_KEY=bax_pk_your_key