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

> Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button.

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatMessageHeader",
    "package": "cometchat_chat_uikit",
    "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
    "description": "Widget that showcases the User or Group details in the toolbar with typing indicator and back navigation button.",
    "props": {
      "data": {
        "user": { "type": "User?", "default": "null" },
        "group": { "type": "Group?", "default": "null" }
      },
      "callbacks": {
        "onBack": "VoidCallback?",
        "newChatButtonClick": "VoidCallback?",
        "chatHistoryButtonClick": "VoidCallback?"
      },
      "visibility": {
        "showBackButton": { "type": "bool?", "default": "true" },
        "hideVideoCallButton": { "type": "bool?", "default": "false" },
        "hideVoiceCallButton": { "type": "bool?", "default": "false" },
        "usersStatusVisibility": { "type": "bool?", "default": "true" },
        "hideNewChatButton": { "type": "bool?", "default": "false" },
        "hideChatHistoryButton": { "type": "bool?", "default": "false" }
      },
      "viewSlots": {
        "backButton": "WidgetBuilder?",
        "subtitleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
        "listItemView": "Widget Function(Group? group, User? user, BuildContext context)?",
        "trailingView": "List<Widget>? Function(User? user, Group? group, BuildContext context)?",
        "leadingStateView": "Widget? Function(Group? group, User? user, BuildContext context)?",
        "titleView": "Widget? Function(Group? group, User? user, BuildContext context)?",
        "auxiliaryButtonView": "Widget? Function(Group? group, User? user, BuildContext context)?"
      },
      "style": {
        "messageHeaderStyle": "CometChatMessageHeaderStyle?",
        "listItemStyle": "ListItemStyle?"
      },
      "layout": {
        "avatarHeight": { "type": "double?", "default": "null" },
        "avatarWidth": { "type": "double?", "default": "null" },
        "height": { "type": "double?", "default": "65" },
        "padding": { "type": "EdgeInsetsGeometry?", "default": "null" }
      },
      "icons": {
        "menuIcon": "Widget?",
        "newChatIcon": "IconData?",
        "chatHistoryIcon": "IconData?"
      },
      "formatting": {
        "dateTimeFormatterCallback": "DateTimeFormatterCallback?"
      }
    },
    "sdkListeners": [
      "onUserOnline",
      "onUserOffline",
      "onTypingStarted",
      "onTypingEnded",
      "onGroupMemberJoined",
      "onGroupMemberLeft",
      "onGroupMemberKicked",
      "onGroupMemberBanned",
      "onMemberAddedToGroup"
    ]
  }
  ```
</Accordion>

## Overview

`CometChatMessageHeader` is a [Widget](/ui-kit/flutter/v5/components-overview#components) that showcases the [User](/sdk/flutter/users-overview) or [Group](/sdk/flutter/groups-overview) details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.

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

The `CometChatMessageHeader` is comprised of the following components:

| Components                                                | Description                                                                                                                                      |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| [ListItem Widget](/ui-kit/flutter/v5/components-overview) | This component’s widget consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
| Back Button                                               | BackButton that allows users to navigate back from the current activity or screen to the previous one                                            |

## Usage

### Integration

You can launch `CometChatMessageHeader` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatMessageHeader`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageHeader())); // A user or group object is required to launch this widget.
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatMessageHeader` as a Widget in the build Method

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

    class MessageHeader extends StatefulWidget {
      const MessageHeader({super.key});

      @override
      State<MessageHeader> createState() => _MessageHeaderState();
    }

    class _MessageHeaderState extends State<MessageHeader> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: SafeArea(
                child: CometChatMessageHeader() // A user or group object is required to launch this widget.
            )
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/flutter/v5/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### 1. onBack

Enhance your application's functionality by leveraging the `onBack` feature. This capability allows you to customize the behavior associated with navigating back within your app. Utilize the provided code snippet to override default behaviors and tailor the user experience according to your specific requirements.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      onBack: () {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a `Widget`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.

The `CometChatMessageHeader` widget does not have any exposed filters.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

## Style

To customize the appearance, you can assign a `CometChatMessageHeaderStyle` object to the `CometChatMessageHeader` widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      messageHeaderStyle: CometChatMessageHeaderStyle(
           avatarStyle: CometChatAvatarStyle(
              backgroundColor: Color(0xFFFBAA75),
              borderRadius: BorderRadius.circular(6.67),
           ),
           callButtonsStyle: CometChatCallButtonsStyle(
              voiceCallIconColor: Color(0xFFF76808),
              videoCallIconColor: Color(0xFFF76808),
            ),
        )
    )
    ```
  </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>

### CometChatMessageHeaderStyle Properties

| Property                               | Data Type                        | Description                                    |
| -------------------------------------- | -------------------------------- | ---------------------------------------------- |
| `backgroundColor`                      | `Color?`                         | Background color for the message header.       |
| `border`                               | `BoxBorder?`                     | Border for the message header.                 |
| `borderRadius`                         | `BorderRadiusGeometry?`          | Border radius for the message header.          |
| `titleTextStyle`                       | `TextStyle?`                     | Text style for the title.                      |
| `titleTextColor`                       | `Color?`                         | Color for the title text.                      |
| `subtitleTextStyle`                    | `TextStyle?`                     | Text style for the subtitle.                   |
| `subtitleTextColor`                    | `Color?`                         | Color for the subtitle text.                   |
| `typingIndicatorTextStyle`             | `TextStyle?`                     | Text style for the typing indicator.           |
| `onlineStatusColor`                    | `Color?`                         | Color for the online status indicator.         |
| `backIconColor`                        | `Color?`                         | Color for the back icon.                       |
| `backIcon`                             | `Widget?`                        | Custom back icon widget.                       |
| `privateGroupBadgeIcon`                | `Widget?`                        | Icon for private group badge.                  |
| `passwordProtectedGroupBadgeIcon`      | `Widget?`                        | Icon for password protected group badge.       |
| `privateGroupBadgeIconColor`           | `Color?`                         | Color for private group badge icon.            |
| `passwordProtectedGroupBadgeIconColor` | `Color?`                         | Color for password protected group badge icon. |
| `groupIconBackgroundColor`             | `Color?`                         | Background color for group icon.               |
| `avatarStyle`                          | `CometChatAvatarStyle?`          | Style for the avatar.                          |
| `callButtonsStyle`                     | `CometChatCallButtonsStyle?`     | Style for call buttons.                        |
| `statusIndicatorStyle`                 | `CometChatStatusIndicatorStyle?` | Style for status indicator.                    |
| `newChatIconColor`                     | `Color?`                         | Color for the new chat icon.                   |
| `chatHistoryIconColor`                 | `Color?`                         | Color for the chat history icon.               |
| `menuIconColor`                        | `Color?`                         | Color for the menu icon.                       |

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

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

Here is a code snippet demonstrating how you can customize the functionality of the Message Header widget.

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

## CometChatMessageHeader Properties

Following is a list of customizations along with their corresponding code snippets:

| Property                    | Data Type                                                                          | Description                                                    |
| --------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| `backButton`                | `WidgetBuilder?`                                                                   | Used to set the back button widget.                            |
| `subtitleView`              | `Widget? Function(Group? group, User? user, BuildContext context)?`                | To set subtitle view for the group or user.                    |
| `user`                      | `User?`                                                                            | Set `User` object, one is mandatory either `user` or `group`.  |
| `group`                     | `Group?`                                                                           | Set `Group` object, one is mandatory either `user` or `group`. |
| `listItemView`              | `Widget Function(Group? group, User? user, BuildContext context)?`                 | Set custom view for list item.                                 |
| `messageHeaderStyle`        | `CometChatMessageHeaderStyle?`                                                     | Set styling props for message header.                          |
| `listItemStyle`             | `ListItemStyle?`                                                                   | Style for every list item.                                     |
| `trailingView`              | `List<Widget>? Function(User? user, Group? group, BuildContext context)?`          | Set appbar options for the trailing view.                      |
| `onBack`                    | `VoidCallback?`                                                                    | Callback triggered on closing the screen.                      |
| `avatarHeight`              | `double?`                                                                          | Set height for avatar.                                         |
| `avatarWidth`               | `double?`                                                                          | Set width for avatar.                                          |
| `height`                    | `double?`                                                                          | Set height for message header.                                 |
| `padding`                   | `EdgeInsetsGeometry?`                                                              | Set padding for message header.                                |
| `hideVideoCallButton`       | `bool?`                                                                            | Used to hide video call button.                                |
| `hideVoiceCallButton`       | `bool?`                                                                            | Used to hide voice call button.                                |
| `showBackButton`            | `bool?`                                                                            | Toggle visibility for back button. Defaults to `true`.         |
| `usersStatusVisibility`     | `bool?`                                                                            | Controls visibility of status indicator. Defaults to `true`.   |
| `options`                   | `List<CometChatOption>? Function(User? user, Group? group, BuildContext context)?` | Set menu options for the header.                               |
| `menuIcon`                  | `Widget?`                                                                          | Set custom menu icon widget.                                   |
| `leadingStateView`          | `Widget? Function(Group? group, User? user, BuildContext context)?`                | To set leading view for the message header.                    |
| `titleView`                 | `Widget? Function(Group? group, User? user, BuildContext context)?`                | To set the title view for the message header.                  |
| `auxiliaryButtonView`       | `Widget? Function(Group? group, User? user, BuildContext context)?`                | To set auxiliary view for the message header.                  |
| `dateTimeFormatterCallback` | `DateTimeFormatterCallback?`                                                       | Callback that can be used to format the date and time.         |
| `hideChatHistoryButton`     | `bool?`                                                                            | Hide chat history button.                                      |
| `hideNewChatButton`         | `bool?`                                                                            | Hide new chat button.                                          |
| `newChatButtonClick`        | `VoidCallback?`                                                                    | Callback triggered on new chat button click.                   |
| `chatHistoryButtonClick`    | `VoidCallback?`                                                                    | Callback triggered on chat history button click.               |
| `newChatIcon`               | `IconData?`                                                                        | Provides new chat icon.                                        |
| `chatHistoryIcon`           | `IconData?`                                                                        | Provides chat history icon.                                    |

***

### Advanced

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.

***

#### auxiliaryButtonView

Allows adding a custom button or additional action next to the title or trailing section.

Use Cases:

* Add a Call button (📞) for quick voice/video calls.
* Include a Block/Report button for moderation.
* Implement a Pin Chat feature.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
       auxiliaryButtonView: (group, user, context) {
        // return auxiliary view 
      },
    )
    ```
  </Tab>
</Tabs>

***

#### ListItemView

The `CometChatMessageHeader` widget consists of a `ListItemView`. You can customize the ListItem according to your requirements by using the `.setListItemView` method.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      listItemView: (Group? group, User? user, context) {
        return Placeholder(); // Replace this placeholder with your custom widget.
      },
    )
    ```
  </Tab>
</Tabs>

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart main.dart theme={null}
      CometChatMessageHeader(
          user: user,
          group: group,
          listItemView: (group, user, context) {
            return CometChatListItem(
              avatarURL: group != null ? group.icon : user?.avatar,
              avatarName: group != null ? group.name : user?.name,
              avatarStyle: CometChatAvatarStyle(
                  borderRadius: BorderRadius.circular(6.67),
                  backgroundColor: Color(0xFFAA9EE8)),
              title: group != null ? group.name : user?.name ?? "",
              subtitleView: Text(
                user != null
                    ? (user.status == UserStatusConstants.online
                        ? "Online"
                        : "Offline")
                    : "${group?.membersCount} members",
                style: TextStyle(
                  color: Color(0xFF727272),
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                ),
              ),
              tailView: CometChatUIKit.getDataSource()
                  .getAuxiliaryHeaderMenu(context, user, group, null),
              style: ListItemStyle(
                titleStyle: TextStyle(
                  color: Color(0xFF141414),
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            );
          },
        ); // Replaced the placeholder with a custom widget.
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f287ed44-message_header_list_item_view-e8970c41a03ad8888016135bff5c01b8.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=4447ee7a11543de19b785f128ecb400e" width="2560" height="480" data-path="images/f287ed44-message_header_list_item_view-e8970c41a03ad8888016135bff5c01b8.png" />
</Frame>

***

#### leadingStateView

Defines a custom leading view, typically used for the receiver's profile picture or avatar.

Use Cases:

* Display a circular profile picture with a status indicator.
* Add a custom badge for special roles (Admin, Verified ✅).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
       leadingStateView: (group, user, context) {
        // return leading view 
      },
    )
    ```
  </Tab>
</Tabs>

***

#### SubtitleView

You can customize the subtitle widget for each item to meet your specific preferences and needs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
      CometChatMessageHeader(
          user: user,
          subtitleView: (group, user, context) {
            String subtitle;
            if (group != null) {
              subtitle = "${group.membersCount} . ${group.description}";
            } else {
              subtitle = user?.status ?? '';
            }
            return Text(
              subtitle,
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w400,
                color: Color(0XFF727272),
              ),
            );
          },
        )
    ```
  </Tab>
</Tabs>

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

***

#### trailingView

You can set the Custom `trailingView` to the `CometChatMessageHeader` widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      trailingView: (User? user, Group? group, BuildContext context) {
        return [
          IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.info_outline,
                      color: Color(0xFF141414),
                    ),
               )
        ];
      },
    )
    ```
  </Tab>
</Tabs>

***

#### Options Menu

You can add custom menu options to the message header using the `options` property. These options appear in a popup menu when the menu icon is tapped.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      options: (User? user, Group? group, BuildContext context) {
        return [
          CometChatOption(
            id: "view_profile",
            title: "View Profile",
            icon: Icons.person,
            onClick: () {
              // Handle view profile action
            },
          ),
          CometChatOption(
            id: "block_user",
            title: "Block User",
            icon: Icons.block,
            onClick: () {
              // Handle block user action
            },
          ),
        ];
      },
    )
    ```
  </Tab>
</Tabs>

***

#### BackIcon

You can customize the Back Icon according to your specific requirements by using the `.backButton` method.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageHeader(
      user: user,
      backButton: (context) {
        return IconButton(
          icon: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)),
          onPressed: () {
            // Navigator.pop(context);
          },
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/aca79061-message_header_set_back_button_cometchat_screens-eab6d2813ae0b502581c7f1f6da43292.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=b416a444d71aae057e377f3e607f7f28" alt="Image" width="4498" height="3120" data-path="images/aca79061-message_header_set_back_button_cometchat_screens-eab6d2813ae0b502581c7f1f6da43292.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/efec3ff1-message_header_set_back_button_cometchat_screens-99dc6f800eaa7e1fcf9ee298ffbbc5d3.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=5625da8dc1aceea7874db19aa91efc4e" alt="Image" width="4498" height="3120" data-path="images/efec3ff1-message_header_set_back_button_cometchat_screens-99dc6f800eaa7e1fcf9ee298ffbbc5d3.png" />
  </Tab>
</Tabs>

***