Threaded Messages Header - CometChat Docs

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.

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
)

Quick Start

Dart

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”:

Dart

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.

Dart

CometChatThreadedHeader(
  parentMessage: parentMessage,
  loggedInUser: loggedInUser,
  onBack: () {
    Navigator.pop(context);
  },
)

`onError`

Fires on internal errors.

Dart

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

SDK Events (Real-Time, Automatic)

SDK Listener	Internal behavior
New thread reply received	Increments reply count
Parent message edited	Updates parent message display
Parent message deleted	Updates parent message display

Functionality

Property	Type	Default	Description
`parentMessage`	`BaseMessage`	required	The parent message of the thread
`loggedInUser`	`User`	required	The currently logged-in user
`showBackButton`	`bool?`	`true`	Toggle back button visibility
`title`	`String?`	`null`	Custom title text
`hideMessageComposer`	`bool?`	`false`	Hide the message composer

Custom View Slots

Bubble View

Replace the parent message bubble display.

Dart

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:

Component	Description
`ThreadedHeaderBloc`	Manages threaded header state
`ThreadedHeaderEvent`	Events: `InitializeThreadedHeader`, `IncrementReplyCount`, `UpdateParentMessage`
`ThreadedHeaderState`	Threaded header state with parent message and reply count

Style

Dart

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

​Where It Fits

​Quick Start

​Actions and Events

​Callback Methods

​onBack

​onError

​SDK Events (Real-Time, Automatic)

​Functionality

​Custom View Slots

​Bubble View

​Advanced

​BLoC Access

​Style

​Next Steps