Skip to main content
Enhance your Flutter chat app with threaded messaging by integrating CometChat’s CometChatThreadedMessageList and CometChatMessageList components to reply to messages in threads and view focused sub-conversations seamlessly.

​
Overview

The sample app demonstrates how to enable threaded messaging in Flutter using CometChat’s UI Kit:
  • 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 v5 installed.
  • Initialized CometChat credentials (appID, region, authKey).

​
Components

ComponentRole
CometChatMessageListDisplays main chat; provides onThreadRepliesClick callback.
CometChatThreadedMessageListFetches and displays replies for a parent message.
CometChatMessageComposerSends new messages; pass parentMessageId to send replies.
CometChatThreadedHeaderShows the parent message and thread context at the top.

​
Integration Steps

​
Show the “Reply in Thread” Option

Trigger thread view when tapping the thread icon. 
CometChatMessageList(
  onThreadRepliesClick: (BaseMessage message) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => CometChatThread(parentMessage: message),
      ),
    );
  },
  // …other props
);
File reference:
sample_app/lib/messages/messages.dart Captures the user’s intent to view or add to a thread. Display a dedicated thread view. 
class CometChatThread extends StatelessWidget {
  final BaseMessage parentMessage;

  CometChatThread({required this.parentMessage});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Thread")),
      body: Column(
        children: [
          CometChatThreadedHeader(message: parentMessage),
          Expanded(
            child: CometChatThreadedMessageList(
              parentMessageId: parentMessage.id,
            ),
          ),
          CometChatMessageComposer(
            parentMessageId: parentMessage.id,
          ),
        ],
      ),
    );
  }
}
File reference:
lib/thread_screen/cometchat_thread.dart Provides a focused UI for thread interactions.

​
Send a Threaded Message

Send replies in the context of a thread. 
CometChatMessageComposer(
  parentMessageId: parentMessage.id,
  // …other composer props
);
File reference:
lib/thread_screen/cometchat_thread.dart Automatically associates new messages with the parent thread.

​
Fetch & Display Thread Replies

Retrieve and show all replies under a parent message. 
MessagesRequest request = MessagesRequestBuilder()
  .setParentMessageId(parentMessageId)
  .build();

request.fetchPrevious().then((replies) {
  // Render these replies in the list
});
File reference:
lib/thread_screen/cometchat_thread.dart Ensures only relevant threaded messages are shown.

​
Customization Options

  • Header Styling: Customize CometChatThreadedHeader appearance (colors, fonts).
  • List Pagination: Adjust limit in MessagesRequestBuilder.
  • Composer Placeholder: Change placeholder text based on thread context.

​
Filtering / Edge Cases

  • Parent Deleted: Show a fallback message or disable composer if parent is deleted.
  • No Replies: Display an empty state (e.g., “No replies yet”).
  • Offline Mode: Queue thread operations or show connectivity indicators.

​
Error Handling & Edge Cases

  • Fetch Failures: Show error UI with retry option on fetchPrevious errors.
  • Send Failures: Display SnackBar on composer send errors; allow retry.
  • Loading States: Show loading indicators during fetch/send operations.

​
Optional Context-Specific Notes

  • Group vs. Direct Threads: Threads work the same for groups and 1:1 chats.
  • Blocked Users: Threading respects block state; blocked users cannot send replies.

​
Summary / Feature Matrix

FeatureComponent / Method
Show thread optionCometChatMessageList.onThreadRepliesClick
Thread view screenCometChatThread widget
Display threaded messagesCometChatThreadedMessageList(parentMessageId)
Send threaded messageCometChatMessageComposer(parentMessageId)
Fetch thread repliesMessagesRequestBuilder.setParentMessageId

​
Next Steps & Further Reading

Flutter Sample App

Fully functional sample applications to accelerate your development.View on GitHub

UI Kit Source Code

Access the complete UI Kit source code on GitHub.View on GitHub
⌘I