Skip to main content

Chat Page Config

ChatPage accepts ChatPageConfig for the built-in chat page. The config covers the app bar, page background, message list behavior, input area, bubble style, long-press menu, custom message content callbacks, and message send hooks.

Entry Point​

Dart
ChatPage(
  channel: channel,
  config: ChatPageConfig(
    appBarConfig: ChatAppBarConfig(title: 'Support'),
    backgroundConfig: ChatBackgroundConfig(backgroundColor: Colors.white),
    inputConfig: MessageInputConfig(hintText: 'Message'),
    bubbleConfig: BubbleConfig(borderRadius: 14),
  ),
)

ChatPageConfig​

Fields:

  • appBarConfig: built-in chat app bar.
  • backgroundConfig: page and safe-area background.
  • messageListConfig: message list behavior and labels.
  • inputConfig: built-in input area config.
  • bubbleConfig: built-in message bubble style.
  • longPressMenuConfig: built-in message long-press menu.
  • onForwardSelectedMessages: override selected-message forwarding.
  • customMessageBubbleBuilders: map MessageType to a custom message-content builder.
  • profileProvider: resolves sender profile data for the message list and input.
  • onBeforeSendMessage: intercepts outbound messages before sending.
  • onAfterSendMessage: observes outbound messages after sending.
  • onAsyncMessageReceived: observes received messages asynchronously.

For a standalone ChatPage, configure ChatPageConfig.profileProvider directly. When a built-in ChannelPage opens the default chat page, ChannelConfig.profileProvider is passed through automatically and can be used as the shared channel-list/chat-page resolver.

ChatAppBarConfig​

Fields:

  • height
  • title
  • titleResolver
  • centerTitle
  • backgroundColor
  • titleTextStyle
  • showSearchButton
  • showBackUnreadBadge
  • searchButtonTooltip
  • searchPageTitle
  • actions

Example:

Dart
ChatPageConfig(
  appBarConfig: ChatAppBarConfig(
    titleResolver: (context, channel) async => 'Support',
    showSearchButton: true,
    actions: [
      IconButton(
        icon: const Icon(Icons.info_outline),
        onPressed: () {},
      ),
    ],
  ),
)

ChatBackgroundConfig​

Fields:

  • backgroundColor
  • safeAreaColor
  • backgroundImage
  • backgroundImageUrl
  • imageFitMode
  • imageRepeat

Example:

Dart
ChatPageConfig(
  backgroundConfig: const ChatBackgroundConfig(
    backgroundColor: Color(0xFFF7F8FA),
    safeAreaColor: Colors.white,
  ),
)

MessageListConfig​

Fields:

  • backgroundColor
  • emptyText
  • showAvatar
  • showSenderName
  • showSentStatus
  • showUnreadHistoryTip
  • showNewMessageTip
  • showTypingStatusTip
  • historyMessageCount
  • maxSelectedMessages
  • showNetworkStatusTip
  • networkStatusText
  • unreadHistoryTipText
  • newMessageTipText
  • typingStatusTipText
  • showReadReceiptUserList
  • readReceiptUsersTitle
  • readReceiptUsersReadTabText
  • readReceiptUsersUnreadTabText
  • readReceiptUsersLoadingText
  • readReceiptUsersEmptyText
  • readReceiptUsersLoadFailedText
  • onLinkTap
  • onPhoneTap
  • onReadReceiptStatusTap
  • onResendMessage
  • readReceiptUsersLoader
  • enableSwipeToReference: deprecated; use long press reply instead.

Example:

Dart
ChatPageConfig(
  messageListConfig: MessageListConfig(
    showSenderName: true,
    showSentStatus: true,
    onLinkTap: (context, message, uri) {
      // Open the link with your application router or URL handler.
    },
  ),
)

Long-Press Menu​

ChatMessageLongPressMenuConfig controls the built-in menu:

  • enabled
  • showCopyButton
  • showDeleteButton
  • showDeleteForAllButton
  • showReferenceButton
  • showMoreButton
  • showForwardButton
  • copyText
  • deleteText
  • deleteForAllText
  • referenceText
  • moreText
  • forwardText
  • deleteBehavior
  • onCopy
  • onDelete
  • onDeleteForAll
  • onReference

Example:

Dart
ChatPageConfig(
  longPressMenuConfig: ChatMessageLongPressMenuConfig(
    showForwardButton: true,
    deleteBehavior: ChatMessageDeleteBehavior.forMe,
  ),
)
Last updated on