Skip to main content

​
Overview

The CometChatMentionsFormatter class formats mentions within text messages displayed in the chat interface. For the base CometChatTextFormatter API, see Text Formatters.

​
Usage

Pass CometChatMentionsFormatter to the textFormatters property of widgets like CometChatConversations, CometChatMessageList, or CometChatMessageComposer. 
textFormatters: [
  CometChatMentionsFormatter(
    messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
      TextStyle(
        color: alignment == BubbleAlignment.left ? Colors.orange : Colors.pink,
        fontSize: 14,
        fontWeight: FontWeight.bold,
      ),
  ),
]

​
Actions

onMentionTap
Setting a listener for mention-click events in Message Bubbles. This listener is activated when a mention is clicked, returning the corresponding user object. 
CometChatMessageList(
  user: user,
  textFormatters: [
    CometChatMentionsFormatter(
      onMentionTap: (mention, mentionedUser, {message}) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Tapped on ${mentionedUser.name}')),
        );
      },
      messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
        TextStyle(
          color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
    ),
  ],
)

​
Customization

PropertyDescriptionCode
trackingCharacterCharacter that triggers mention searchString? trackingCharacter
patternRegex pattern to identify mentionsRegExp? pattern
messageBubbleTextStyleText style for message bubbleTextStyle? messageBubbleTextStyle
messageInputTextStyleText style for message inputTextStyle? messageInputTextStyle
onMentionTapCallback for mention tap actionsvoid Function(User)? onMentionTap
groupMembersRequestBuilderRequest builder for group membersGroupMembersRequestBuilder?
usersRequestBuilderRequest builder for usersUsersRequestBuilder?

​
Advanced

​
Composer Mention Text Style

CometChatMessageComposer(
  user: user,
  textFormatters: [
    CometChatMentionsFormatter(
      messageInputTextStyle: (theme) {
        return const TextStyle(
          color: Colors.lightBlueAccent,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        );
      },
    ),
  ],
)

​
Message Bubble Mention Text Style

CometChatMessageList(
  user: user,
  textFormatters: [
    CometChatMentionsFormatter(
      messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
        TextStyle(
          color: alignment == BubbleAlignment.left ? Colors.orange : Colors.greenAccent,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
    ),
  ],
)

​
Conversations Mention Text Style

CometChatConversations(
  textFormatters: [
    CometChatMentionsFormatter(
      messageBubbleTextStyle: (theme, alignment, {forConversation = false}) =>
        const TextStyle(
          color: Colors.lightBlueAccent,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
    ),
  ],
)