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

# Message Header

> Configure CometChat Flutter UI Kit Message Header with user or group details, presence, typing indicators, navigation, and actions.

`CometChatMessageHeader` renders the header of a chat conversation showing user/group avatar, name, online/offline status, typing indicators, back navigation, and action buttons (call buttons, menu).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8a6e5f89-message_header-54abac45ab669c3eb45f530d18909c93.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=fbbdcc668f74912fe95db5eb3ebf949b" width="2560" height="480" data-path="images/8a6e5f89-message_header-54abac45ab669c3eb45f530d18909c93.png" />
</Frame>

***

## Where It Fits

`CometChatMessageHeader` is a toolbar component. It sits at the top of a chat screen above `CometChatMessageList` and `CometChatMessageComposer`. It automatically shows typing indicators and user presence in real-time.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Scaffold(
      body: Column(
        children: [
          CometChatMessageHeader(user: user),
          Expanded(child: CometChatMessageList(user: user)),
          CometChatMessageComposer(user: user),
        ],
      ),
    )
    ```
  </Tab>
</Tabs>

***

## Quick Start

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class ChatScreen extends StatelessWidget {
      final User user;
      const ChatScreen({super.key, required this.user});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: PreferredSize(
            preferredSize: const Size.fromHeight(60),
            child: CometChatMessageHeader(user: user),
          ),
          body: Column(
            children: [
              Expanded(child: CometChatMessageList(user: user)),
              CometChatMessageComposer(user: user),
            ],
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

For group chats, pass a `Group` object instead:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(group: group)
    ```
  </Tab>
</Tabs>

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and a valid `User` or `Group` object.

***

## Actions and Events

### Callback Methods

#### `onBack`

Fires when the user presses the back button.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      onBack: () {
        Navigator.pop(context);
      },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

Fires on internal errors.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      onError: (e) {
        debugPrint("Error: ${e.message}");
      },
    )
    ```
  </Tab>
</Tabs>

### SDK Events (Real-Time, Automatic)

The component listens to these SDK events internally. No manual setup needed.

| SDK Listener                                  | Internal behavior                           |
| --------------------------------------------- | ------------------------------------------- |
| `onUserOnline` / `onUserOffline`              | Updates online/offline status and last seen |
| `onTypingStarted` / `onTypingEnded`           | Shows/hides typing indicator in subtitle    |
| `onGroupMemberJoined` / `onGroupMemberLeft`   | Updates group member count                  |
| `onGroupMemberKicked` / `onGroupMemberBanned` | Updates group member count                  |
| `onMemberAddedToGroup`                        | Updates group member count                  |
| `ccOwnershipChanged`                          | Updates group owner info                    |
| `onUserBlocked` / `onUserUnblocked`           | Updates user blocked state                  |
| Connection reconnected                        | Refreshes user/group data                   |

***

## Functionality

| Property                 | Type            | Default | Description                                                  |
| ------------------------ | --------------- | ------- | ------------------------------------------------------------ |
| `user`                   | `User?`         | `null`  | User object for 1:1 chat header                              |
| `group`                  | `Group?`        | `null`  | Group object for group chat header                           |
| `showBackButton`         | `bool?`         | `true`  | Toggle back button visibility                                |
| `backButton`             | `Widget?`       | `null`  | Custom back button widget                                    |
| `appBarOptions`          | `List<Widget>?` | `null`  | Additional widgets in the app bar (e.g., call buttons, menu) |
| `hideUserStatus`         | `bool?`         | `false` | Hide online/offline status for users                         |
| `disableTypingIndicator` | `bool?`         | `false` | Disable typing indicator display                             |

***

## Custom View Slots

### Subtitle View

Replace the default subtitle (online status / typing indicator / member count).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      subtitleView: (user, group) {
        if (user != null) {
          return Text(
            user.status == "online" ? "Active now" : "Last seen recently",
            style: TextStyle(color: Color(0xFF727272), fontSize: 12),
          );
        }
        if (group != null) {
          return Text(
            "${group.membersCount} members",
            style: TextStyle(color: Color(0xFF727272), fontSize: 12),
          );
        }
        return null;
      },
    )
    ```
  </Tab>
</Tabs>

### Leading View

Replace the avatar / left section.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      leadingView: (user, group) {
        return CircleAvatar(
          backgroundImage: NetworkImage(user?.avatar ?? ""),
          child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null,
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Title View

Replace the name / title text.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      titleView: (user, group) {
        return Text(
          user?.name ?? group?.name ?? "",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Trailing View

Replace the right section (call buttons, menu, etc.).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      trailingView: (user, group) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.call), onPressed: () {}),
            IconButton(icon: Icon(Icons.videocam), onPressed: () {}),
            IconButton(icon: Icon(Icons.info_outline), onPressed: () {}),
          ],
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

## Common Patterns

### Header with info button for groups

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      group: group,
      trailingView: (user, group) {
        return IconButton(
          icon: Icon(Icons.info_outline),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) => GroupInfoScreen(group: group!),
            ));
          },
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Hide back button (embedded in tab layout)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      showBackButton: false,
    )
    ```
  </Tab>
</Tabs>

***

## Advanced

### BLoC Access

Provide a custom `MessageHeaderBloc`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      messageHeaderBloc: CustomMessageHeaderBloc(),
    )
    ```
  </Tab>
</Tabs>

### Public BLoC Methods

| Method                | Returns                           | Description                                     |
| --------------------- | --------------------------------- | ----------------------------------------------- |
| `getTypingNotifier()` | `ValueNotifier<TypingIndicator?>` | Typing indicator notifier for isolated rebuilds |

***

## Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      messageHeaderStyle: CometChatMessageHeaderStyle(
        backgroundColor: Colors.white,
        avatarStyle: CometChatAvatarStyle(
          borderRadius: BorderRadius.circular(8),
        ),
        statusIndicatorStyle: CometChatStatusIndicatorStyle(),
        typingIndicatorStyle: CometChatTypingIndicatorStyle(),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7997ba37-message_header_styling-508bff70fcee0fbc5f338d60e996ff87.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=05b282ead13feda6dcbf6b97f3845a5b" width="2560" height="480" data-path="images/7997ba37-message_header_styling-508bff70fcee0fbc5f338d60e996ff87.png" />
</Frame>

### Style Properties

| Property               | Description                 |
| ---------------------- | --------------------------- |
| `backgroundColor`      | Header background color     |
| `avatarStyle`          | Avatar appearance           |
| `statusIndicatorStyle` | Online/offline indicator    |
| `typingIndicatorStyle` | Typing indicator text style |

See [Component Styling](/ui-kit/flutter/component-styling) for the full reference.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" icon="comments" href="/ui-kit/flutter/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Message Composer" icon="pen" href="/ui-kit/flutter/message-composer">
    Compose and send messages
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/flutter/call-buttons">
    Add voice and video call buttons
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/flutter/component-styling">
    Detailed styling reference
  </Card>
</CardGroup>