Mentions Formatter

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,
        ),
    ),
  ],
)