Message Header
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});
State<MessageHeader> createState() => _MessageHeaderState();
}
class _MessageHeaderState extends State<MessageHeader> {
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),
),
)
)

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. |
showVideoCallButton | bool? | Used to hide/display video call button. |
showVoiceCallButton | bool? | Used to hide/display voice call button. |
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. |
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
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),
),
)
];
},
)

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

