New Chat

Enable users to start one-on-one or group chats with a searchable contact list in CometChat Flutter UI Kit.

AI Agent Component Spec

Field	Value
Package	cometchat_chat_uikit
Key components	CometChatContacts, CometChatUsers, CometChatGroups, CometChatAvatar
Init	CometChatUIKit.init(uiKitSettings) then CometChatUIKit.login(uid)
Entry point	Avatar menu → “Create Conversation” → CometChatContacts
Sample app	GitHub
Related	All Guides

New Chat enables users to start one-on-one or group conversations by selecting from a searchable contact list.

Before starting, complete the Getting Started guide.

---

Components

Component / Class	Role
CometChatAvatar	Displays the user avatar in the app bar
PopupMenuButton	Shows menu options when the avatar is tapped
CometChatContacts	UI for the “Start Conversation” screen with tabs
CometChatContactsController	Manages tab switching and item selection
CometChatUsers	Lists users with search and selection
CometChatGroups	Lists groups with search and selection
PageManager	Handles navigation to the chat screen

---

Integration Steps

1. Add Avatar Menu

Show the avatar in the app bar and open a menu on tap with “Create Conversation” option.

File: dashboard.dart

PopupMenuButton(
  icon: CometChatAvatar(
    width: 40,
    height: 40,
    image: CometChatUIKit.loggedInUser?.avatar,
    name: CometChatUIKit.loggedInUser?.name,
  ),
  itemBuilder: (context) => [
    PopupMenuItem(value: '/Create', child: Text("Create Conversation")),
  ],
  onSelected: (value) {
    if (value == '/Create') {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => CometChatContacts()),
      );
    }
  },
);

---

2. Open Contacts Screen

Navigate to the CometChatContacts screen which provides tabs for Users and Groups.

File: dashboard.dart

void openCreateConversation(BuildContext context) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => CometChatContacts()),
  );
}

---

3. Handle User/Group Selection

Wire up the onItemTap callback to navigate to the chat screen when a user or group is selected.

File: cometchat_contacts_controller.dart

CometChatUsers(
  hideAppbar: true,
  onItemTap: (context, user) => _onItemTap(context: context, user: user),
);

CometChatGroups(
  hideAppbar: true,
  onItemTap: (context, group) => _onItemTap(context: context, group: group),
);

---

4. Navigate to Chat

Open the chat screen for the selected user or group using PageManager.

File: page_manager.dart

void _onItemTap({required BuildContext context, User? user, Group? group}) {
  if (user != null) {
    PageManager.navigateToMessages(context: context, user: user);
  } else if (group != null) {
    JoinProtectedGroupUtils.onGroupItemTap(context, group);
  }
}

---

Feature Matrix

Feature	Component / Method	File
Avatar menu	PopupMenuButton, CometChatAvatar	dashboard.dart
Contacts screen	CometChatContacts	dashboard.dart
List users	CometChatUsers	cometchat_contacts_controller.dart
List groups	CometChatGroups	cometchat_contacts_controller.dart
Handle selection	_onItemTap	page_manager.dart
Navigate to chat	PageManager.navigateToMessages	page_manager.dart

---

Next Steps

Users

Display and search user lists.

Groups

Display and manage group lists.

Conversations

View and manage conversation history.

All Guides

Browse all feature and formatter guides.