Message Header

Toolbar displaying user/group info, typing indicators, online status, and navigation controls.

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

Scaffold(
  body: Column(
    children: [
      CometChatMessageHeader(user: user),
      Expanded(child: CometChatMessageList(user: user)),
      CometChatMessageComposer(user: user),
    ],
  ),
)

---

Quick Start

Dart

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

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

CometChatMessageHeader(
  user: user,
  onBack: () {
    Navigator.pop(context);
  },
)

onError

Fires on internal errors.

Dart

CometChatMessageHeader(
  user: user,
  onError: (e) {
    debugPrint("Error: ${e.message}");
  },
)

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
user	User?	null	User object for 1:1 chat header
group	Group?	null	Group object for group chat header
showBackButton	bool?	true	Toggle back button visibility
backButton	Widget?	null	Custom back button widget
appBarOptions	List<Widget>?	null	Additional widgets in the app bar (e.g., call buttons, menu)
hideUserStatus	bool?	false	Hide online/offline status for users
disableTypingIndicator	bool?	false	Disable typing indicator display

---

Custom View Slots

Subtitle View

Replace the default subtitle (online status / typing indicator / member count).

Dart

CometChatMessageHeader(
  user: user,
  subtitleView: (user, group) {
    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

CometChatMessageHeader(
  user: user,
  leadingView: (user, group) {
    return CircleAvatar(
      backgroundImage: NetworkImage(user?.avatar ?? ""),
      child: user?.avatar == null ? Text(user?.name?[0] ?? "") : null,
    );
  },
)

Title View

Replace the name / title text.

Dart

CometChatMessageHeader(
  user: user,
  titleView: (user, group) {
    return Text(
      user?.name ?? group?.name ?? "",
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
    );
  },
)

Trailing View

Replace the right section (call buttons, menu, etc.).

Dart

CometChatMessageHeader(
  user: user,
  trailingView: (user, group) {
    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

CometChatMessageHeader(
  group: group,
  trailingView: (user, group) {
    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

CometChatMessageHeader(
  user: user,
  showBackButton: false,
)

---

Advanced

BLoC Access

Provide a custom MessageHeaderBloc:

Dart

CometChatMessageHeader(
  user: user,
  messageHeaderBloc: CustomMessageHeaderBloc(),
)

Public BLoC Methods

Method	Returns	Description
getTypingNotifier()	ValueNotifier<TypingIndicator?>	Typing indicator notifier for isolated rebuilds

---

Style

Dart

CometChatMessageHeader(
  user: user,
  messageHeaderStyle: CometChatMessageHeaderStyle(
    backgroundColor: Colors.white,
    avatarStyle: CometChatAvatarStyle(
      borderRadius: BorderRadius.circular(8),
    ),
    statusIndicatorStyle: CometChatStatusIndicatorStyle(),
    typingIndicatorStyle: CometChatTypingIndicatorStyle(),
  ),
)

Style Properties

Property	Description
backgroundColor	Header background color
avatarStyle	Avatar appearance
statusIndicatorStyle	Online/offline indicator
typingIndicatorStyle	Typing indicator text style

See Component Styling for the full reference.

---

Next Steps

Message List

Display messages in a conversation

Message Composer

Compose and send messages

Call Buttons

Add voice and video call buttons

Component Styling

Detailed styling reference