> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Group Members

> Scrollable list of members in a group with scope indicators, search, and member management actions.

`CometChatGroupMembers` renders a scrollable list of members in a specific group with real-time updates, scope indicators (owner/admin/moderator/participant), search, and member management actions (kick, ban, change scope).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/3e09e39d-group_members-697dfef4da0b9d955ec567bd58b54bfb.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=53d3d087f49a8b70a293368fa6d17ea9" width="2560" height="1600" data-path="images/3e09e39d-group_members-697dfef4da0b9d955ec567bd58b54bfb.png" />
</Frame>

***

## Where It Fits

`CometChatGroupMembers` is a list component that requires a `Group` object. It renders group members and supports actions like kick, ban, and scope change based on the logged-in user's permissions.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onItemTap: (groupMember) {
        // Navigate to member profile or chat
      },
    )
    ```
  </Tab>
</Tabs>

***

## Quick Start

Using Navigator:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => CometChatGroupMembers(group: group),
    ));
    ```
  </Tab>
</Tabs>

Embedding as a widget:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: CometChatGroupMembers(group: group),
        ),
      );
    }
    ```
  </Tab>
</Tabs>

Prerequisites: CometChat SDK initialized, a user logged in, and a valid `Group` object.

***

## Filtering Members

Pass a `GroupMembersRequestBuilder` to control what loads:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
        ..limit = 20
        ..searchKeyword = "john",
    )
    ```
  </Tab>
</Tabs>

### Filter Recipes

| Recipe           | Builder property                    |
| ---------------- | ----------------------------------- |
| Limit per page   | `..limit = 20`                      |
| Search by name   | `..searchKeyword = "john"`          |
| Filter by scopes | `..scopes = ["admin", "moderator"]` |

***

## Actions and Events

### Callback Methods

#### `onItemTap`

Fires when a member row is tapped.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onItemTap: (groupMember) {
        // Navigate to member profile
      },
    )
    ```
  </Tab>
</Tabs>

#### `onItemLongPress`

Fires when a member row is long-pressed. By default shows the member action menu (kick/ban/scope change).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onItemLongPress: (groupMember) {
        // Custom long press behavior
      },
    )
    ```
  </Tab>
</Tabs>

#### `onBack`

Fires when the user presses the back button.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onBack: () {
        Navigator.pop(context);
      },
    )
    ```
  </Tab>
</Tabs>

#### `onSelection`

Fires when members are selected/deselected in multi-select mode.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      selectionMode: SelectionMode.multiple,
      onSelection: (selectedMembers, context) {
        // Handle selected members
      },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

Fires on internal errors.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onError: (e) {
        debugPrint("Error: ${e.message}");
      },
    )
    ```
  </Tab>
</Tabs>

#### `onLoad`

Fires when the list is successfully fetched.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onLoad: (memberList) {
        debugPrint("Loaded ${memberList.length} members");
      },
    )
    ```
  </Tab>
</Tabs>

#### `onEmpty`

Fires when the list is empty after loading.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onEmpty: () {
        debugPrint("No members found");
      },
    )
    ```
  </Tab>
</Tabs>

### Global Events

The component emits events via `CometChatGroupEvents`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    class _YourScreenState extends State<YourScreen> with CometChatGroupEventListener {
      @override
      void initState() {
        super.initState();
        CometChatGroupEvents.addGroupsListener("listenerId", this);
      }

      @override
      void dispose() {
        CometChatGroupEvents.removeGroupsListener("listenerId");
        super.dispose();
      }

      @override
      void ccGroupMemberKicked(Action action, User kickedUser, User kickedBy, Group kickedFrom) {
        // Handle member kicked
      }

      @override
      void ccGroupMemberBanned(Action action, User bannedUser, User bannedBy, Group bannedFrom) {
        // Handle member banned
      }

      @override
      void ccGroupMemberScopeChanged(Action action, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
        // Handle scope changed
      }
    }
    ```
  </Tab>
</Tabs>

### SDK Events (Real-Time, Automatic)

| SDK Listener                     | Internal behavior                                                |
| -------------------------------- | ---------------------------------------------------------------- |
| `onGroupMemberJoined`            | Adds member to list                                              |
| `onGroupMemberLeft`              | Removes member from list                                         |
| `onGroupMemberKicked`            | Removes member from list                                         |
| `onGroupMemberBanned`            | Removes member from list                                         |
| `onGroupMemberScopeChanged`      | Updates member scope in list                                     |
| `onUserOnline` / `onUserOffline` | Updates presence via per-member ValueNotifier (isolated rebuild) |
| Connection reconnected           | Triggers silent refresh                                          |

***

## Functionality

| Property                | Type             | Default      | Description                        |
| ----------------------- | ---------------- | ------------ | ---------------------------------- |
| `group`                 | `Group`          | **required** | The group whose members to display |
| `title`                 | `String?`        | `null`       | Custom app bar title               |
| `showBackButton`        | `bool`           | `true`       | Toggle back button                 |
| `hideAppbar`            | `bool?`          | `false`      | Toggle app bar visibility          |
| `hideSearch`            | `bool`           | `false`      | Toggle search bar                  |
| `usersStatusVisibility` | `bool?`          | `true`       | Show online/offline status         |
| `selectionMode`         | `SelectionMode?` | `null`       | Enable selection mode              |
| `hideKickMemberOption`  | `bool?`          | `false`      | Hide kick option in action menu    |
| `hideBanMemberOption`   | `bool?`          | `false`      | Hide ban option in action menu     |
| `hideScopeChangeOption` | `bool?`          | `false`      | Hide scope change option           |

***

## Custom View Slots

### Leading View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      leadingView: (context, groupMember) {
        return CircleAvatar(
          child: Text(groupMember.name?[0] ?? ""),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Title View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      titleView: (context, groupMember) {
        return Text(
          groupMember.name ?? "",
          style: TextStyle(fontWeight: FontWeight.bold),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Subtitle View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      subtitleView: (context, groupMember) {
        return Text(
          groupMember.scope ?? "participant",
          style: TextStyle(color: Color(0xFF727272), fontSize: 14),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Trailing View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      trailingView: (context, groupMember) {
        return Chip(label: Text(groupMember.scope ?? ""));
      },
    )
    ```
  </Tab>
</Tabs>

### List Item View

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      listItemView: (groupMember) {
        return ListTile(
          leading: CircleAvatar(child: Text(groupMember.name?[0] ?? "")),
          title: Text(groupMember.name ?? ""),
          subtitle: Text(groupMember.scope ?? "participant"),
          trailing: Chip(label: Text(groupMember.scope ?? "")),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### State Views

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      emptyStateView: (context) => Center(child: Text("No members")),
      errorStateView: (context) => Center(child: Text("Something went wrong")),
      loadingStateView: (context) => Center(child: CircularProgressIndicator()),
    )
    ```
  </Tab>
</Tabs>

***

## Menu Options

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // Replace all options
    CometChatGroupMembers(
      group: group,
      setOptions: (groupMember, bloc, context) {
        return [
          CometChatOption(
            id: "message",
            iconWidget: Icon(Icons.message),
            title: "Message",
            onClick: () {
              // Open chat with this member
            },
          ),
        ];
      },
    )

    // Append to defaults
    CometChatGroupMembers(
      group: group,
      addOptions: (groupMember, bloc, context) {
        return [
          CometChatOption(
            id: "profile",
            iconWidget: Icon(Icons.person),
            title: "View Profile",
            onClick: () {
              // Open member profile
            },
          ),
        ];
      },
    )
    ```
  </Tab>
</Tabs>

***

## Advanced

### BLoC Access

Provide a custom `GroupMembersBloc`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      groupMembersBloc: CustomGroupMembersBloc(),
    )
    ```
  </Tab>
</Tabs>

### Public BLoC Events

| Event                                      | Description                  |
| ------------------------------------------ | ---------------------------- |
| `LoadGroupMembers`                         | Load initial members         |
| `LoadMoreGroupMembers`                     | Load next page (pagination)  |
| `SearchGroupMembers(keyword)`              | Search members               |
| `KickMember(groupMember)`                  | Kick a member from the group |
| `BanMember(groupMember)`                   | Ban a member from the group  |
| `ChangeMemberScope(groupMember, newScope)` | Change member's scope        |
| `ToggleMemberSelection(uid)`               | Toggle selection state       |
| `ClearMemberSelection`                     | Clear all selections         |

For `ListBase` override hooks (`onItemAdded`, `onItemRemoved`, `onItemUpdated`, `onListCleared`, `onListReplaced`), see [BLoC & Data — ListBase Hooks](/ui-kit/flutter/customization-bloc-data#listbase-hooks).

### Public BLoC Methods

| Method                   | Returns                 | Description                                      |
| ------------------------ | ----------------------- | ------------------------------------------------ |
| `getStatusNotifier(uid)` | `ValueNotifier<String>` | Per-member status notifier for isolated rebuilds |

### Permission-Based Actions

Member actions (kick, ban, scope change) are permission-aware based on the logged-in user's scope:

| Logged-in User Scope | Can Kick                 | Can Ban                  | Can Change Scope         |
| -------------------- | ------------------------ | ------------------------ | ------------------------ |
| Owner                | All members              | All members              | All members              |
| Admin                | Moderators, Participants | Moderators, Participants | Moderators, Participants |
| Moderator            | Participants             | Participants             | No                       |
| Participant          | No                       | No                       | No                       |

***

## Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      groupMembersStyle: CometChatGroupMembersStyle(
        avatarStyle: CometChatAvatarStyle(
          borderRadius: BorderRadius.circular(8),
          backgroundColor: Color(0xFFFBAA75),
        ),
        statusIndicatorStyle: CometChatStatusIndicatorStyle(),
        changeScopeStyle: CometChatChangeScopeStyle(),
        confirmDialogStyle: CometChatConfirmDialogStyle(),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7dd6eb5e-group_members_styling-b9b1f40be76f7e4137dbd7dc7e10141c.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=0d4c28243cf40543e8352e4bd0d3aeec" width="2560" height="1600" data-path="images/7dd6eb5e-group_members_styling-b9b1f40be76f7e4137dbd7dc7e10141c.png" />
</Frame>

### Style Properties

| Property               | Description                        |
| ---------------------- | ---------------------------------- |
| `avatarStyle`          | Avatar appearance                  |
| `statusIndicatorStyle` | Online/offline indicator           |
| `changeScopeStyle`     | Scope change dialog style          |
| `confirmDialogStyle`   | Kick/ban confirmation dialog style |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Groups" icon="users" href="/ui-kit/flutter/groups">
    Browse available groups
  </Card>

  <Card title="Group Chat Guide" icon="book" href="/ui-kit/flutter/guide-group-chat">
    Complete group chat implementation
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/flutter/component-styling">
    Detailed styling reference
  </Card>

  <Card title="Conversations" icon="comments" href="/ui-kit/flutter/conversations">
    Browse recent conversations
  </Card>
</CardGroup>