Message Header

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

AI Agent Component Spec

{
  "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"
  ]
}

Overview

CometChatMessageHeader is a Widget that showcases the User or Group details in the toolbar. Furthermore, it also presents a typing indicator and a back navigation button for ease of use.

The CometChatMessageHeader is comprised of the following components:

Components	Description
ListItem Widget	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

Dart

Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageHeader())); // A user or group object is required to launch this widget.

2. Embedding CometChatMessageHeader as a Widget in the build Method

Dart

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

---

Actions

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.

Dart

CometChatMessageHeader(
  user: user,
  onBack: () {
    // TODO("Not yet implemented")
  },
)

---

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.

Dart

CometChatMessageHeader(
  user: user,
  messageHeaderStyle: CometChatMessageHeaderStyle(
       avatarStyle: CometChatAvatarStyle(
          backgroundColor: Color(0xFFFBAA75),
          borderRadius: BorderRadius.circular(6.67),
       ),
       callButtonsStyle: CometChatCallButtonsStyle(
          voiceCallIconColor: Color(0xFFF76808),
          videoCallIconColor: Color(0xFFF76808),
        ),
    )
)

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.

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

Dart

CometChatMessageHeader(
  user: user,
  showBackButton: true,
  usersStatusVisibility: true,
)

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.

Dart

CometChatMessageHeader(
   auxiliaryButtonView: (group, user, context) {
    // return auxiliary view 
  },
)

---

ListItemView

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

Dart

CometChatMessageHeader(
  user: user,
  listItemView: (Group? group, User? user, context) {
    return Placeholder(); // Replace this placeholder with your custom widget.
  },
)

Example

Here is the complete example for reference:

Dart

main.dart

  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.

---

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 ✅).

Dart

CometChatMessageHeader(
   leadingStateView: (group, user, context) {
    // return leading view 
  },
)

---

SubtitleView

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

Dart

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

---

trailingView

You can set the Custom trailingView to the CometChatMessageHeader widget.

Dart

CometChatMessageHeader(
  user: user,
  trailingView: (User? user, Group? group, BuildContext context) {
    return [
      IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.info_outline,
                  color: Color(0xFF141414),
                ),
           )
    ];
  },
)

---

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.

Dart

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

---

BackIcon

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

Dart

CometChatMessageHeader(
  user: user,
  backButton: (context) {
    return IconButton(
      icon: Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)),
      onPressed: () {
        // Navigator.pop(context);
      },
    );
  },
)

Android

iOS

---