View Slots - CometChat Docs

View Slots let you swap out specific parts of a component — the avatar area, title, subtitle, trailing section, or the entire row — while keeping the rest of the component’s behavior intact.

The Builder Callback Pattern

Flutter UI Kit components accept nullable builder callbacks for each customizable region. Each callback receives the relevant data model and returns a Widget?. Return null to fall back to the default view.

Widget? Function(BuildContext context, DataModel model)?

Available View Slots

List Components (Conversations, Users, Groups, Group Members)

Property	Region	Signature
`leadingView`	Left section (avatar)	`Widget? Function(BuildContext, Model)`
`titleView`	Title text	`Widget? Function(BuildContext, Model)`
`subtitleView`	Subtitle text	`Widget? Function(BuildContext, Model)`
`trailingView`	Right section (timestamp, badge)	`Widget? Function(BuildContext, Model)`

Message List

Property	Region	Signature
`headerView`	Above the message list	`Widget? Function(BuildContext, {User?, Group?, int?})`
`footerView`	Below the message list	`Widget? Function(BuildContext, {User?, Group?, int?})`
`templates`	All message bubble templates	`List<CometChatMessageTemplate>`
`addTemplate`	Additional templates merged with defaults	`List<CometChatMessageTemplate>`

Message Template Slots

Each CometChatMessageTemplate has its own view slots for the bubble structure:

Property	Region	Signature
`headerView`	Above the bubble content	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`
`contentView`	Main bubble content	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment, {AdditionalConfigurations?})`
`footerView`	Below the bubble	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`
`bottomView`	Below the content, inside the bubble	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`
`statusInfoView`	Timestamp and receipts	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`
`replyView`	Quoted reply preview	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`
`threadView`	Thread reply indicator	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`
`bubbleView`	Entire bubble (replaces all other slots)	`Widget? Function(BaseMessage, BuildContext, BubbleAlignment)`

Example: Custom Leading View on Conversations

Dart

CometChatConversations(
  leadingView: (context, conversation) {
    final name = conversation.conversationWith?.name ?? '';
    return CircleAvatar(
      backgroundColor: Color(0xFF6851D6),
      child: Text(
        name.isNotEmpty ? name[0].toUpperCase() : '?',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  },
)

Example: Custom Subtitle View on Conversations

Dart

CometChatConversations(
  subtitleView: (context, conversation) {
    final lastMessage = conversation.lastMessage;
    String subtitle;
    if (lastMessage is TextMessage) {
      subtitle = lastMessage.text;
    } else if (lastMessage is MediaMessage) {
      subtitle = '📎 ${lastMessage.attachment?.fileExtension ?? "Media"}';
    } else {
      subtitle = 'New conversation';
    }
    return Text(
      subtitle,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    );
  },
)

Example: Custom Header View on Message List

Dart

CometChatMessageList(
  user: user,
  headerView: (context, {user, group, parentMessageId}) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      color: Color(0xFFEDEAFA),
      child: Row(
        children: [
          Chip(label: Text('📌 Pinned Messages')),
          SizedBox(width: 8),
          Chip(label: Text('🔗 Saved Links')),
        ],
      ),
    );
  },
)

Slot-Level vs Full Replacement

Use individual slot properties (leadingView, titleView, subtitleView, trailingView) when you want to customize one region while keeping the default layout for everything else. Use bubbleView on a CometChatMessageTemplate when you need complete control over the entire message bubble.

When you set bubbleView on a template, all other template slots (headerView, contentView, footerView, etc.) are ignored since the entire bubble is replaced.

Message Template — Full template structure for message bubbles.
Customization Overview — See all customization categories.

​The Builder Callback Pattern

​Available View Slots

​List Components (Conversations, Users, Groups, Group Members)

​Message List

​Message Template Slots

​Example: Custom Leading View on Conversations

​Example: Custom Subtitle View on Conversations

​Example: Custom Header View on Message List

​Slot-Level vs Full Replacement

​Related

The Builder Callback Pattern

Available View Slots

List Components (Conversations, Users, Groups, Group Members)

Message List

Message Template Slots

Example: Custom Leading View on Conversations

Example: Custom Subtitle View on Conversations

Example: Custom Header View on Message List

Slot-Level vs Full Replacement

Related