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