> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```dart theme={null}
IconButton(
  onPressed: () {
    showCreateGroup(
      context: context,
      colorPalette: colorPalette,
      typography: typography,
      spacing: spacing,
    );
  },
  icon: Icon(Icons.group_add),
);
```

```dart theme={null}
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`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)

***

### Join Public/Password Group

```dart theme={null}
CometChatGroups(
  onItemTap: (context, group) {
    JoinProtectedGroupUtils.onGroupItemTap(context, group, ...);
  },
);
```

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

📄 [`join_protected_group_util.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/utils/join_protected_group_util.dart)

***

### View Members

```dart theme={null}
CometChatGroupInfo(
  group: group,
);
```

📄 [`group_info/cometchat_group_info.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info.dart)

***

### Add Members

```dart theme={null}
CometChatAddMembers(
  group: group,
);
```

📄 [`add_members/cometchat_add_members.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/add_members/cometchat_add_members.dart)

***

### Ban/Unban Members

```dart theme={null}
CometChatBannedMembers(
  group: group,
);
```

📄 [`banned_members/cometchat_banned_members.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/banned_members/cometchat_banned_members.dart)

***

### Change Member Scope

```dart theme={null}
CometChatChangeScope(
  group: group,
  user: user,
);
```

📄 [`group_info/cometchat_group_info_controller.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/group_info/cometchat_group_info_controller.dart)

***

### Transfer Ownership

```dart theme={null}
CometChatTransferOwnership(
  group: group,
);
```

📄 [`transfer_ownership/cometchat_transfer_ownership.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/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

<CardGroup>
  <Card title="Flutter Sample App">
    Explore the working implementation in our official sample app.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
  </Card>

  <Card title="Flutter UIKit Source">
    Get the full UI Kit source for deeper customization.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit)
  </Card>
</CardGroup>