Skip to main content

​
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:
  1. Leading widget — Sender’s avatar
  2. Header widget — Sender’s name (useful in group chats)
  3. Content widget — Message content (text, images, videos, etc.)
  4. Bottom widget — Additional elements like link previews or “load more” buttons
  5. Footer widget — Timestamp and delivery/read status

​
Properties

PropertyDescription
typeMaps the template to a CometChat message type
categorySets the message category
headerViewCustom header widget for the bubble
contentViewCustom content widget for the bubble
footerViewCustom footer widget (timestamp, receipts)
bottomViewCustom bottom widget (link previews, etc.)
bubbleViewComplete custom bubble widget
optionsList of actions on long press

​
Customization

​
Header Widget

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

​
Content Widget

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"),
            ),
          ],
        );
      },
    ),
  ],
)

​
Bottom Widget

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

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

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: 
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.