Message a User Privately from a Group Chat

Learn how to initiate a private one-on-one chat with a group member directly from a group chat screen.

Overview

This feature allows users to start a private, direct chat with a member of a group without leaving the group chat context. It enables seamless, context-aware private conversations, improving collaboration and user experience. Users can tap on a group member to instantly open a private chat.

Prerequisites

• A Flutter project with CometChat UIKit Flutter v5 installed
• CometChat credentials (appID, region, authKey) initialized
• Group chat and user info screens implemented
• Navigation setup for moving between group and private chat screens

Components

Component / Class	Role
CometChatMessageList	Displays group messages and user avatars
CometChatUserInfo	Shows user details and actions (e.g., “Message” button)
PageManager	Handles navigation to the private chat screen
lib/messages.dart	Main chat screen logic
lib/user_info/cometchat_user_info.dart	User info and action UI

Integration Steps

Add User Info/Action in Group Chat

Allow users to view group member info and provide a “Message” action.

IconButton(
  icon: Icon(Icons.info_outline),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => CometChatUserInfo(user: user),
      ),
    );
  },
);

File reference:
lib/group_info/cometchat_group_info.dart

Handle Private Message Navigation

Start a private chat with the selected user.

ElevatedButton(
  onPressed: () {
    PageManager().navigateToMessages(
      context: context,
      user: user,
    );
  },
  child: Text('Message'),
);

File reference:
lib/user_info/cometchat_user_info.dart

Implementation Flow

1. User taps a group member’s avatar or info icon
2. CometChatUserInfo screen opens
3. User taps “Message”
4. App navigates to the private chat screen with that user

Customization Options

• Styling: Customize the user info screen and action buttons using UIKit theming
• APIs: Add more actions (e.g., block, view profile) in the user info screen
• Configuration: Control which users can be messaged (e.g., block list, admin-only)

Filtering / Edge Cases

• Exclude Blocked Users: Remove blocked users from selection
• Existing Conversation: Navigate to an existing private chat if one exists
• User Blocked: Disable the “Message” button if the user is blocked

Error Handling & Blocked-User-Handling

• UI States: Disable the message button and show a tooltip if a user is blocked
• Feedback: Use SnackBar or Toast for error messages (e.g., “Cannot message this user”)
• Retry Logic: Allow retrying navigation if a network error occurs

Optional Context-Specific Notes

• Group vs. User: This flow applies only to group members; use the standard new chat flow for users outside the group

Summary / Feature Matrix

Feature	Component / Method	File(s)
Show user info	CometChatUserInfo	lib/group_info/cometchat_group_info.dart
Message user	PageManager.navigateToMessages	lib/user_info/cometchat_user_info.dart
Access from group	Avatar/IconButton	lib/messages.dart

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