Supabase Chat UI

Pre-built Flutter UI components for Supabase Chat SDK. Build beautiful chat interfaces in minutes.

pub package

Features

  • Pre-built Screens: Ready-to-use channel list and chat screens
  • Customizable Widgets: Individual components for custom layouts
  • Theming System: Full theme customization with light/dark presets
  • Responsive: Works on all screen sizes
  • Accessible: Follows Flutter accessibility guidelines

Components

  • ChatChannelListScreen - Full-featured channel list
  • ChatScreen - Complete chat interface
  • ChatChannelListView - Scrollable channel list widget
  • ChatMessageListView - Scrollable message list widget
  • ChatMessageBubble - Individual message bubble
  • ChatMessageInput - Message input with attachments
  • ChatUserAvatar - User avatar with online status
  • ChatChannelListTile - Channel list item
  • ChatTheme - Theming system
  • ChatColors - Color palette

Installation

Add both packages to your pubspec.yaml:

dependencies:
  supabase_chat_sdk: ^0.1.0
  supabase_chat_ui: ^0.1.0

Quick Start

1. Wrap with ChatThemeProvider

import 'package:supabase_chat_ui/supabase_chat_ui.dart';

MaterialApp(
  builder: (context, child) {
    return ChatThemeProvider(
      theme: ChatTheme.light(),  // or ChatTheme.dark()
      child: child!,
    );
  },
  home: MyHomePage(),
)

2. Use Pre-built Screens

// Channel list screen
ChatChannelListScreen(
  title: 'Messages',
  onChannelTap: (channel) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => ChatScreen(channel: channel),
      ),
    );
  },
)

// Chat screen
ChatScreen(
  channel: channel,
  otherUser: otherUserProfile,  // For direct channels
)

Theming

Using Built-in Themes

ChatThemeProvider(
  theme: ChatTheme.light(),
  child: YourApp(),
)

ChatThemeProvider(
  theme: ChatTheme.dark(),
  child: YourApp(),
)

Custom Theme

ChatThemeProvider(
  theme: ChatTheme(
    colors: ChatColors(
      primary: const Color(0xFF6366F1),
      sentMessageBackground: const Color(0xFF6366F1),
      sentMessageText: Colors.white,
      receivedMessageBackground: const Color(0xFFF3F4F6),
      receivedMessageText: Colors.black,
      onlineIndicator: Colors.green,
      timestamp: Colors.grey,
      divider: const Color(0xFFE5E7EB),
    ),
    messageTextStyle: const TextStyle(fontSize: 15),
    messagePadding: const EdgeInsets.all(12),
  ),
  child: YourApp(),
)

Examples

See the example directory for a complete minimal implementation.

For a full showcase with both SDK and UI features, see the root example.

License

MIT License - see LICENSE file for details.

Libraries

supabase_chat_ui
Supabase Chat UI - Pre-built UI components for Supabase Chat SDK.