> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatMessageHeader` |
  | Package | `cometchat_chat_uikit` |
  | Import | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';` |
  | Purpose | Configure CometChat Flutter UI Kit Message Header with user or group details, presence, typing indicators, navigation, and actions. |
  | Data props | `group` · `user` |
  | Actions | `onBack` · `chatHistoryButtonClick` · `newChatButtonClick` — [details](#actions-and-events) |
  | View slots | `backButton` · `trailingView` · `listItemView` · `subtitleView` · `titleView` · `leadingStateView` · `auxiliaryButtonView` — [details](#custom-view-slots) |
  | Styling | `messageHeaderStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. |
  | Stitching | Pair with `CometChatMessageList` and `CometChatMessageComposer`, passing the same `user` or `group` to all three. |
  | Prerequisites | `CometChatUIKit` initialised and a user logged in. |
  | Full props | [27 props](#functionality) |
</Accordion>

`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-llms-scoped-indexes/-nSFFcS2LLIkMyn9/images/8a6e5f89-message_header-54abac45ab669c3eb45f530d18909c93.png?fit=max&auto=format&n=-nSFFcS2LLIkMyn9&q=85&s=66b7fc2498c5be27ae813ca301afc825" 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`

### 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 |
| - | - | - | - |
| `backButton` | `WidgetBuilder?` | `null` | Custom back button widget |
| `messageHeaderStyle` | `CometChatMessageHeaderStyle?` | `null` | `CometChatMessageHeaderStyle` set styling props for message header |
| `group` | `Group?` | `null` | Group object for group chat header |
| `user` | `User?` | `null` | User object for 1:1 chat header |
| `trailingView` | `List<Widget>? Function(User? user, Group? group, BuildContext context)?` | `null` | `trailingView` set appbar options |
| `listItemView` | `Widget Function(Group? group, User? user, BuildContext context)?` | `null` | `listItemView` set custom view for listItem |
| `showBackButton` | `bool?` | `true` | Toggle back button visibility |
| `subtitleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `subtitleView` to set subtitle view |
| `listItemStyle` | `ListItemStyle?` | `null` | `listItemStyle` style for every list item |
| `onBack` | `VoidCallback?` | `null` | `onBack` callback triggered on closing this screen |
| `avatarHeight` | `double?` | `null` | `avatarHeight` set height for avatar |
| `avatarWidth` | `double?` | `null` | `avatarWidth` set width for avatar |
| `height` | `double?` | `null` | `height` set height for message header |
| `padding` | `EdgeInsetsGeometry?` | `null` | `padding` set padding for message header |
| `hideVideoCallButton` | `bool?` | `null` | `hideVideoCallButton` is a `bool` that can be used to hide/display video call button |
| `hideVoiceCallButton` | `bool?` | `null` | `hideVoiceCallButton` is a `bool` that can be used to hide/display voice call button |
| `titleView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `titleView` to set to set titleView view |
| `leadingStateView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `leadingStateView` to set leading View |
| `auxiliaryButtonView` | `Widget? Function(Group? group, User? user, BuildContext context)?` | `null` | `auxiliaryButtonView` to set auxiliary view |
| `usersStatusVisibility` | `bool?` | `true` | `usersStatusVisibility` controls visibility of status indicator shown if a user is online |
| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?` | `null` | `dateTimeFormatterCallback` is a callback that can be used to format the date and time |
| `hideNewChatButton` | `bool?` | `null` | `hideNewChatButton` is a `bool` that can be used to hide/display chat button button |
| `hideChatHistoryButton` | `bool?` | `null` | `hideChatHistoryButton` is a `bool` that can be used to hide/display chat history button |
| `chatHistoryButtonClick` | `VoidCallback?` | `null` | `chatHistoryButtonClick` callback triggered on chat history button click |
| `newChatButtonClick` | `VoidCallback?` | `null` | `newChatButtonClick` callback triggered on new chat button click |
| `newChatIcon` | `IconData?` | `null` | `newChatIcon` provides new chat icon |
| `chatHistoryIcon` | `IconData?` | `null` | `chatHistoryIcon` provides chat history icon |

***

## 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: (group, user, context) {
        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,
      leadingStateView: (group, user, context) {
        return CircleAvatar(
          backgroundImage: NetworkImage(user?.avatar ?? ""),
          child: user?.avatar == null ? Text(user?.name.isNotEmpty == true ? user!.name[0] : "") : null,
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Title View

Replace the name / title text.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      titleView: (group, user, context) {
        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, context) {
        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, context) {
        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 has no `messageHeaderBloc` parameter — it manages its own
    // MessageHeaderBloc internally. Customize presentation with the view slots above.
    CometChatMessageHeader(
      user: user,
      subtitleView: (group, user, context) => const Text("Custom subtitle"),
    )
    ```
  </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,
        titleTextColor: Color(0xFF141414),
        subtitleTextColor: Color(0xFF727272),
        onlineStatusColor: Color(0xFF09C26F),
        typingIndicatorTextStyle: TextStyle(fontSize: 12),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/7997ba37-message_header_styling-508bff70fcee0fbc5f338d60e996ff87.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=4e2f6882e4fa5954ae7550e3b94cf959" 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.