Managing Groups in Flutter UI Kit

Learn how to create groups, join public/password groups, manage members, ban users, update roles, and transfer group ownership using CometChat UIKit for Flutter.

Overview

Enable your users to:

• Create or join public/private/password-protected groups
• View and manage group members
• Assign roles and moderate participants
• Transfer group ownership for continuity

Prerequisites

• CometChat UIKit for Flutter installed via pubspec.yaml
• CometChat initialized with App ID, Region, and Auth Key
• Group chat enabled in your CometChat app
• Navigation set up between group/member screens
• Internet permissions

Components

Component/Class	Role
CometChatGroups	Displays groups and a “create” button
CometChatCreateGroup	UI to create new groups
CometChatContacts	Lets users search/join groups
CometChatGroupInfo	Shows group info and member management options
CometChatAddMembers	Add members to a group
CometChatBannedMembers	View/unban banned users
CometChatTransferOwnership	Transfer group ownership
CometChatChangeScope	Change a user’s group role
JoinProtectedGroupUtils	Utility to join password-protected groups

Integration Steps

Create a Group

IconButton(
  onPressed: () {
    showCreateGroup(
      context: context,
      colorPalette: colorPalette,
      typography: typography,
      spacing: spacing,
    );
  },
  icon: Icon(Icons.group_add),
);

ElevatedButton(
  onPressed: () async {
    await CometChat.createGroup(
      group: Group(
        guid: groupId,
        name: groupName,
        type: groupType,
        password: groupPassword,
      ),
      onSuccess: (Group group) => Navigator.pop(context),
      onError: (e) {
        // Show error
      },
    );
  },
  child: Text('Create Group'),
);

📄 dashboard.dart

---

Join Public/Password Group

CometChatGroups(
  onItemTap: (context, group) {
    JoinProtectedGroupUtils.onGroupItemTap(context, group, ...);
  },
);

if (group.type == GroupType.password) {
  // Show password prompt
  // Join via CometChat.joinGroup with password
}

📄 join_protected_group_util.dart

---

View Members

CometChatGroupInfo(
  group: group,
);

📄 group_info/cometchat_group_info.dart

---

Add Members

CometChatAddMembers(
  group: group,
);

📄 add_members/cometchat_add_members.dart

---

Ban/Unban Members

CometChatBannedMembers(
  group: group,
);

📄 banned_members/cometchat_banned_members.dart

---

Change Member Scope

CometChatChangeScope(
  group: group,
  user: user,
);

📄 group_info/cometchat_group_info_controller.dart

---

Transfer Ownership

CometChatTransferOwnership(
  group: group,
);

📄 transfer_ownership/cometchat_transfer_ownership.dart

---

Implementation Flow

1. User creates or joins a group
2. Admin views group info and member list
3. Admin can add, ban, change scope, or transfer ownership

Customization Options

• Modify theme using CometChat UIKit theming APIs
• Add logic to validate group name or enforce limits
• Adjust member filters or role options as needed

Filtering / Edge Cases

• Filter by roles or banned status
• Prevent duplicate group IDs
• Prevent banning owner or transferring to non-member

Error Handling & Blocked Users

• Show UI feedback (SnackBars) on failure
• Blocked users cannot be added or may be auto-banned
• Retry logic for failed actions (create, join, etc.)

Group Type Notes

• Public: anyone can join
• Password: prompt required
• Private: invite-only
• Only admins can ban, change roles, or transfer ownership

Summary / Feature Matrix

Feature	Component / Method	File Path
Create group	CometChatCreateGroup	create_group/cometchat_create_group.dart
Join group	CometChatGroups, JoinProtectedGroupUtils	contacts/cometchat_contacts_controller.dart, utils/join_protected_group_util.dart
View members	CometChatGroupInfo	group_info/cometchat_group_info.dart
Add members	CometChatAddMembers	add_members/cometchat_add_members.dart
Ban/unban members	CometChatBannedMembers	banned_members/cometchat_banned_members.dart
Change scope	CometChatChangeScope	group_info/cometchat_group_info.dart
Transfer ownership	CometChatTransferOwnership	transfer_ownership/cometchat_transfer_ownership.dart

Next Steps & Further Reading

Flutter Sample App

Explore the working implementation in our official sample app.

View on GitHub

Flutter UIKit Source

Get the full UI Kit source for deeper customization.

View on GitHub