ArcaneChatScreen#

A full-featured chat screen component with message display, input, and conversation management.

Basic Usage#

ArcaneChatScreen(
  provider: chatProvider,
  currentUserId: 'user123',
)

Properties#

ChatStyle Options#

• bubbles - Chat bubble style (default)
• tiles - Tile/card style messages

Bubble Style#

ArcaneChatScreen(
  provider: chatProvider,
  currentUserId: userId,
  style: ChatStyle.bubbles,
)

Tile Style#

ArcaneChatScreen(
  provider: chatProvider,
  currentUserId: userId,
  style: ChatStyle.tiles,
)

Without Avatars#

ArcaneChatScreen(
  provider: chatProvider,
  currentUserId: userId,
  showAvatar: false,
)

Without Timestamps#

ArcaneChatScreen(
  provider: chatProvider,
  currentUserId: userId,
  showTimestamp: false,
)

ChatProvider Interface#

abstract class ChatProvider {
  Stream<List<ChatMessage>> get messages;
  Future<void> sendMessage(String content);
  Future<void> loadMore();
}

class ChatMessage {
  final String id;
  final String senderId;
  final String senderName;
  final String? senderAvatar;
  final String content;
  final DateTime timestamp;
  final bool isRead;
}

Examples#

Basic Chat Implementation#

class MyChatProvider implements ChatProvider {
  final _controller = StreamController<List<ChatMessage>>.broadcast();
  final List<ChatMessage> _messages = [];

  @override
  Stream<List<ChatMessage>> get messages => _controller.stream;

  @override
  Future<void> sendMessage(String content) async {
    _messages.add(ChatMessage(
      id: DateTime.now().toString(),
      senderId: 'user123',
      senderName: 'Me',
      content: content,
      timestamp: DateTime.now(),
    ));
    _controller.add(_messages);
  }

  @override
  Future<void> loadMore() async {
    // Load older messages
  }
}

Chat Screen in App#

ArcaneScreen(
  header: ArcaneBar(
    titleText: 'Chat with Support',
    trailing: [
      ArcaneIconButton(
        icon: ArcaneText('⋮'),
        onPressed: () => showOptions(),
      ),
    ],
  ),
  child: ArcaneChatScreen(
    provider: supportChatProvider,
    currentUserId: currentUser.id,
    style: ChatStyle.bubbles,
    onSendMessage: (message) {
      analytics.trackMessage();
    },
  ),
)

Group Chat#

ArcaneChatScreen(
  provider: groupChatProvider,
  currentUserId: userId,
  showAvatar: true,  // Show avatars for group identification
  showTimestamp: true,
  placeholder: 'Message #general...',
)

Related Components#

• ArcaneScreen - Screen wrapper
• ArcaneTextInput - Text input
• ArcaneAvatar - User avatars