Threaded Messages

Enhance your Flutter chat app with threaded messaging using CometChat V6’s CometChatMessageList and CometChatThreadedHeader components.

Overview

• Reply to specific messages to start focused sub-conversations
• View all replies grouped under the parent message
• Seamlessly switch back to the main conversation

Prerequisites

• A Flutter project with CometChat UIKit Flutter V6 installed
• Initialized CometChat credentials

Components

Component	Role
CometChatMessageList	Displays main chat; provides onThreadRepliesClick callback
CometChatThreadedHeader	Shows the parent message and thread context
CometChatMessageComposer	Sends new messages; pass parentMessageId for replies

Integration Steps

Show the “Reply in Thread” Option

Dart

CometChatMessageList(
  user: user,
  onThreadRepliesClick: (BaseMessage message) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => ThreadScreen(parentMessage: message, user: user),
      ),
    );
  },
)

Navigate to the Thread Screen

In V6, compose the thread screen using individual widgets:

Dart

class ThreadScreen extends StatelessWidget {
  final BaseMessage parentMessage;
  final User? user;
  final Group? group;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Thread")),
      body: Column(
        children: [
          CometChatThreadedHeader(message: parentMessage),
          Expanded(
            child: CometChatMessageList(
              user: user,
              group: group,
              parentMessageId: parentMessage.id,
            ),
          ),
          CometChatMessageComposer(
            user: user,
            group: group,
            parentMessageId: parentMessage.id,
          ),
        ],
      ),
    );
  }
}

Send a Threaded Message

Dart

CometChatMessageComposer(
  user: user,
  parentMessageId: parentMessage.id,
)

Customization Options

• Header Styling: Customize CometChatThreadedHeader appearance
• Composer Placeholder: Change placeholder text based on thread context
• Empty State: Display “No replies yet” when thread is empty

Summary

Feature	Component / Method
Show thread option	CometChatMessageList.onThreadRepliesClick
Thread view screen	Custom ThreadScreen widget
Display threaded messages	CometChatMessageList(parentMessageId: ...)
Send threaded message	CometChatMessageComposer(parentMessageId: ...)
Thread header	CometChatThreadedHeader(message: ...)