Message Template

Overview

A CometChatMessageTemplate provides the capability to define and customize both the structure and behavior of message bubbles. It acts as a blueprint for creating message bubble widgets, allowing you to manage appearance and interactions consistently.

Structure

The MessageBubble structure can be broken down into:

Leading widget — Sender’s avatar
Header widget — Sender’s name (useful in group chats)
Content widget — Message content (text, images, videos, etc.)
Bottom widget — Additional elements like link previews or “load more” buttons
Footer widget — Timestamp and delivery/read status

Properties

Property	Description
`type`	Maps the template to a CometChat message type
`category`	Sets the message category
`headerView`	Custom header widget for the bubble
`contentView`	Custom content widget for the bubble
`footerView`	Custom footer widget (timestamp, receipts)
`bottomView`	Custom bottom widget (link previews, etc.)
`bubbleView`	Complete custom bubble widget
`options`	List of actions on long press

Customization

Header Widget

Dart

CometChatMessageList(
  group: group,
  templates: [
    CometChatMessageTemplate(
      type: MessageTypeConstants.text,
      category: MessageCategoryConstants.message,
      headerView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
        return Text(
          "${baseMessage.sender?.name} • 🗓️ In meeting",
          style: TextStyle(
            color: Color(0xFF6852D6),
            fontSize: 14.4,
            fontWeight: FontWeight.w500,
          ),
        );
      },
    ),
  ],
)

Dart

CometChatMessageList(
  group: group,
  templates: [
    CometChatMessageTemplate(
      type: "image",
      category: "message",
      contentView: (message, context, alignment, {AdditionalConfigurations? additionalConfigurations}) {
        if (message is! MediaMessage) return const SizedBox();
        return Wrap(
          direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            CometChatImageBubble(
              imageUrl: message.attachment?.fileUrl,
              metadata: message.metadata,
              key: UniqueKey(),
            ),
            TextButton(
              onPressed: () {
                // Navigate to purchase screen
              },
              child: Text("Buy Now"),
            ),
          ],
        );
      },
    ),
  ],
)

Dart

CometChatMessageList(
  group: group,
  templates: [
    CometChatMessageTemplate(
      type: MessageTypeConstants.text,
      category: MessageCategoryConstants.message,
      bottomView: (BaseMessage baseMessage, BuildContext buildContext, BubbleAlignment alignment) {
        return Container(
          decoration: BoxDecoration(
            color: Color(0xFFF44649).withOpacity(.2),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              Icon(Icons.warning, color: Color(0xFFF44649), size: 12),
              Text(
                "According to guidelines you cannot share contact",
                style: TextStyle(color: Color(0xFFF44649), fontSize: 12),
              ),
            ],
          ),
        );
      },
    ),
  ],
)

Dart

CometChatMessageList(
  group: group,
  templates: [
    CometChatMessageTemplate(
      type: MessageTypeConstants.text,
      category: MessageCategoryConstants.message,
      statusInfoView: (baseMessage, context, alignment) {
        return const SizedBox(height: 11);
      },
      footerView: (baseMessage, context, alignment, {additionalConfigurations}) {
        // Custom footer with time and receipt
        return Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            CometChatDate(date: baseMessage.sentAt!, pattern: DateTimePattern.timeFormat),
          ],
        );
      },
    ),
  ],
)

Options List

Dart

CometChatMessageList(
  group: group,
  templates: [
    CometChatMessageTemplate(
      type: MessageTypeConstants.text,
      category: MessageCategoryConstants.message,
      options: (loggedInUser, messageObject, context, group, additionalConfigurations) {
        final existingOptions = CometChatUIKit.getDataSource()
            .getTextMessageOptions(loggedInUser, messageObject, context, group, additionalConfigurations);
        return [
          CometChatMessageOption(
            id: "refresh",
            title: "Refresh",
            icon: Icon(Icons.refresh, color: Color(0xFF6852D6), size: 24),
          ),
          ...existingOptions,
        ];
      },
    ),
  ],
)

New Templates

Create entirely new templates for custom message types:

Dart

CometChatMessageList(
  user: user,
  messagesRequestBuilder: MessagesRequestBuilder()
    ..limit = 30
    ..types = [...CometChatUIKit.getDataSource().getAllMessageTypes(), "contact"]
    ..categories = CometChatUIKit.getDataSource().getAllMessageCategories(),
  templates: [
    CometChatMessageTemplate(
      type: "contact",
      category: MessageCategoryConstants.custom,
      contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
        return Padding(
          padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
          child: Row(
            children: [
              CircleAvatar(
                backgroundColor: Color(0xFFEDEAFA),
                child: Icon(Icons.person, color: Colors.white),
              ),
              SizedBox(width: 8),
              Text("Contact Name",
                style: TextStyle(
                  color: alignment == BubbleAlignment.right ? Colors.white : Colors.black,
                  fontSize: 14,
                ),
              ),
            ],
          ),
        );
      },
    ),
  ],
)

In V6, CometChatUIKit.getDataSource() is replaced by MessageTemplateUtils for accessing data source methods. Use the appropriate service locator to get message options and templates.

Overview

Structure

Properties

Customization

Header Widget

Content Widget

Bottom Widget

Footer Widget

Options List

New Templates

​Overview

​Structure

​Properties

​Customization

​Header Widget

​Content Widget

​Bottom Widget

​Footer Widget

​Options List

​New Templates

Overview

Structure

Properties

Customization

Header Widget

Content Widget

Bottom Widget

Footer Widget

Options List

New Templates