Mentions Formatter - CometChat Docs

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.

Dart

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.

Dart

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

Property	Description	Code
trackingCharacter	Character that triggers mention search	`String? trackingCharacter`
pattern	Regex pattern to identify mentions	`RegExp? pattern`
messageBubbleTextStyle	Text style for message bubble	`TextStyle? messageBubbleTextStyle`
messageInputTextStyle	Text style for message input	`TextStyle? messageInputTextStyle`
onMentionTap	Callback for mention tap actions	`void Function(User)? onMentionTap`
groupMembersRequestBuilder	Request builder for group members	`GroupMembersRequestBuilder?`
usersRequestBuilder	Request builder for users	`UsersRequestBuilder?`

Advanced

Composer Mention Text Style

Dart

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

Message Bubble Mention Text Style

Dart

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

Dart

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

​Overview

​Usage

​Actions

onMentionTap

​Customization

​Advanced

​Composer Mention Text Style

​Message Bubble Mention Text Style

​Conversations Mention Text Style