Group Chat

Build CometChat Flutter UI Kit group chats with group lists, members, headers, message lists, and composers.

Build group chat functionality in your Flutter app using CometChat V6 UIKit. Create/join groups, view members, manage roles, and moderate participation.

Overview

V6 provides CometChatGroups and CometChatGroupMembers widgets powered by BLoC for group management.

Components

Component	Role
CometChatGroups	Lists available groups
CometChatGroupMembers	Displays and manages group members
CometChatMessageHeader	Shows group info in chat header
CometChatMessageList	Displays group messages
CometChatMessageComposer	Sends messages to group

Integration

Display Groups List

Dart

CometChatGroups(
  onItemTap: (group) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => Scaffold(
          appBar: CometChatMessageHeader(group: group),
          body: SafeArea(
            child: Column(
              children: [
                Expanded(child: CometChatMessageList(group: group)),
                CometChatMessageComposer(group: group),
              ],
            ),
          ),
        ),
      ),
    );
  },
)

Display Group Members

Dart

CometChatGroupMembers(
  group: group,
  onItemTap: (groupMember) {
    // Handle member tap
  },
)

Manage Members

V6 provides built-in options for member management:

Dart

CometChatGroupMembers(
  group: group,
  hideKickMemberOption: false,
  hideBanMemberOption: false,
  hideScopeChangeOption: false,
)

Key V6 Differences

Aspect	V5	V6
Composite widget	CometChatGroupsWithMessages	Not available — compose manually
State management	GetX	BLoC (GroupsBloc)
Member management	Via configuration objects	Direct widget properties