> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.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. | 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) | `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). *** ## 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. ```dart theme={null} Scaffold( body: Column( children: [ CometChatMessageHeader(user: user), Expanded(child: CometChatMessageList(user: user)), CometChatMessageComposer(user: user), ], ), ) ``` *** ## Quick Start ```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), ], ), ); } } ``` For group chats, pass a `Group` object instead: ```dart theme={null} CometChatMessageHeader(group: group) ``` 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. ```dart theme={null} CometChatMessageHeader( user: user, onBack: () { Navigator.pop(context); }, ) ``` #### `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? 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). ```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; }, ) ``` ### Leading View Replace the avatar / left section. ```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, ); }, ) ``` ### Title View Replace the name / title text. ```dart theme={null} CometChatMessageHeader( user: user, titleView: (group, user, context) { return Text( user?.name ?? group?.name ?? "", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), ); }, ) ``` ### Trailing View Replace the right section (call buttons, menu, etc.). ```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: () {}), ], ); }, ) ``` *** ## Common Patterns ### Header with info button for groups ```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!), )); }, ); }, ) ``` ### Hide back button (embedded in tab layout) ```dart theme={null} CometChatMessageHeader( user: user, showBackButton: false, ) ``` *** ## Advanced ### BLoC Access Provide a custom `MessageHeaderBloc`: ```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"), ) ``` ### Public BLoC Methods | Method | Returns | Description | | --------------------- | --------------------------------- | ----------------------------------------------- | | `getTypingNotifier()` | `ValueNotifier` | Typing indicator notifier for isolated rebuilds | *** ## Style ```dart theme={null} CometChatMessageHeader( user: user, messageHeaderStyle: CometChatMessageHeaderStyle( backgroundColor: Colors.white, titleTextColor: Color(0xFF141414), subtitleTextColor: Color(0xFF727272), onlineStatusColor: Color(0xFF09C26F), typingIndicatorTextStyle: TextStyle(fontSize: 12), ), ) ``` ### 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 Display messages in a conversation Compose and send messages Add voice and video call buttons Detailed styling reference