> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# View Slots

> Replace specific regions of a component's UI using builder callbacks without rebuilding the entire component.

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.

```dart theme={null}
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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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),
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

## Example: Custom Subtitle View on Conversations

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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,
        );
      },
    )
    ```
  </Tab>
</Tabs>

## Example: Custom Header View on Message List

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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')),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

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

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

## Related

* [Message Template](/ui-kit/flutter/message-template) — Full template structure for message bubbles.
* [Customization Overview](/ui-kit/flutter/customization-overview) — See all customization categories.