Skip to main content
CometChatThreadedHeader displays the parent message of a thread along with reply count and provides the container for threaded message list and composer. It enables organized threaded conversations within a chat.

​
Where It Fits

CometChatThreadedHeader is used when a user taps “Reply in Thread” on a message. It wraps the parent message display with a CometChatMessageList (filtered by parentMessageId) and CometChatMessageComposer for thread replies. 
CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
)

​
Quick Start

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

class ThreadScreen extends StatelessWidget {
  final BaseMessage parentMessage;
  final User loggedInUser;

  const ThreadScreen({
    super.key,
    required this.parentMessage,
    required this.loggedInUser,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CometChatThreadedHeader(
          parentMessage: parentMessage,
          loggedInUser: loggedInUser,
        ),
      ),
    );
  }
}
Typically launched from the message list when a user selects “Reply in Thread”: 
CometChatMessageList(
  user: user,
  onThreadRepliesClick: (message, context, {bubbleView}) {
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => ThreadScreen(
        parentMessage: message,
        loggedInUser: CometChatUIKit.loggedInUser!,
      ),
    ));
  },
)
Prerequisites: CometChat SDK initialized, a user logged in, and a valid BaseMessage object as the parent message.

​
Actions and Events

​
Callback Methods

​
onBack

Fires when the user presses the back button. 
CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  onBack: () {
    Navigator.pop(context);
  },
)

​
onError

Fires on internal errors. 
CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  onError: (e) {
    debugPrint("Error: ${e.message}");
  },
)

​
SDK Events (Real-Time, Automatic)

SDK ListenerInternal behavior
New thread reply receivedIncrements reply count
Parent message editedUpdates parent message display
Parent message deletedUpdates parent message display

​
Functionality

PropertyTypeDefaultDescription
parentMessageBaseMessagerequiredThe parent message of the thread
loggedInUserUserrequiredThe currently logged-in user
showBackButtonbool?trueToggle back button visibility
titleString?nullCustom title text
hideMessageComposerbool?falseHide the message composer

​
Custom View Slots

​
Bubble View

Replace the parent message bubble display. 
CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  bubbleView: (message) {
    if (message is TextMessage) {
      return Container(
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Color(0xFFF5F5F5),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(message.text),
      );
    }
    return null;
  },
)

​
Advanced

​
BLoC Access

The threaded header uses ThreadedHeaderBloc internally:
ComponentDescription
ThreadedHeaderBlocManages threaded header state
ThreadedHeaderEventEvents: InitializeThreadedHeader, IncrementReplyCount, UpdateParentMessage
ThreadedHeaderStateThreaded header state with parent message and reply count

​
Style

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  style: CometChatThreadedHeaderStyle(
    backgroundColor: Colors.white,
    replyCountTextColor: Color(0xFF727272),
  ),
)

​
Next Steps

Message List

Display messages in a conversation

Message Composer

Compose and send messages

Threaded Messages Guide

Complete threaded messages implementation

Component Styling

Detailed styling reference