supabase_chat_ui 0.1.0

Pre-built Flutter UI components for Supabase Chat SDK with customizable themes, screens, and widgets.

Supabase Chat UI

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

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.