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

# Group Members

> Displays all members of a group in a searchable, scrollable list with member scope badges and management actions.

<Accordion title="AI Agent Component Spec">
  ```json theme={null}
  {
    "component": "CometChatGroupMembers",
    "package": "cometchat_chat_uikit",
    "import": "import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';",
    "description": "Displays all members of a group in a searchable, scrollable list with member scope badges and management actions.",
    "primaryOutput": {
      "prop": "onItemTap",
      "type": "Function(GroupMember groupMember)?"
    },
    "props": {
      "data": {
        "group": {
          "type": "Group",
          "default": "required",
          "note": "The group object to fetch members from"
        },
        "groupMembersRequestBuilder": {
          "type": "GroupMembersRequestBuilder?",
          "default": "null",
          "note": "Custom request builder for filtering members"
        },
        "groupMembersProtocol": {
          "type": "GroupMembersBuilderProtocol?",
          "default": "null",
          "note": "Custom protocol for fetching group members"
        },
        "searchKeyword": {
          "type": "String?",
          "default": "null",
          "note": "Pre-fills search and filters list"
        },
        "controllerTag": {
          "type": "String?",
          "default": "null",
          "note": "Tag for controller management"
        }
      },
      "callbacks": {
        "onItemTap": "Function(GroupMember groupMember)?",
        "onItemLongPress": "Function(GroupMember groupMember)?",
        "onSelection": "Function(List<GroupMember>?)?",
        "onBack": "VoidCallback?",
        "onError": "OnError?",
        "onLoad": "OnLoad<GroupMember>?",
        "onEmpty": "OnEmpty?",
        "stateCallBack": "Function(CometChatGroupMembersController controller)?"
      },
      "visibility": {
        "showBackButton": { "type": "bool", "default": true },
        "hideSearch": { "type": "bool", "default": false },
        "hideSeparator": { "type": "bool?", "default": null },
        "hideError": { "type": "bool?", "default": null },
        "hideAppbar": { "type": "bool?", "default": null },
        "usersStatusVisibility": { "type": "bool?", "default": true },
        "hideKickMemberOption": { "type": "bool?", "default": null },
        "hideBanMemberOption": { "type": "bool?", "default": null },
        "hideScopeChangeOption": { "type": "bool?", "default": null }
      },
      "selection": {
        "selectionMode": {
          "type": "SelectionMode?",
          "values": ["SelectionMode.single", "SelectionMode.multiple", "SelectionMode.none"],
          "default": "null"
        },
        "activateSelection": {
          "type": "ActivateSelection?",
          "values": ["ActivateSelection.onClick", "ActivateSelection.onLongClick"],
          "default": "null"
        }
      },
      "viewSlots": {
        "listItemView": "Widget Function(GroupMember)?",
        "leadingView": "Widget? Function(BuildContext, GroupMember)?",
        "titleView": "Widget? Function(BuildContext, GroupMember)?",
        "subtitleView": "Widget? Function(BuildContext, GroupMember)?",
        "trailingView": "Function(BuildContext, GroupMember)?",
        "loadingStateView": "WidgetBuilder?",
        "emptyStateView": "WidgetBuilder?",
        "errorStateView": "WidgetBuilder?",
        "setOptions": "List<CometChatOption>? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
        "addOptions": "List<CometChatOption>? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?",
        "appBarOptions": "List<Widget>?"
      },
      "icons": {
        "backButton": { "type": "Widget?", "default": "built-in back arrow" },
        "searchBoxIcon": { "type": "Widget?", "default": "built-in search icon" },
        "submitIcon": { "type": "Widget?", "default": "built-in check icon" },
        "selectIcon": { "type": "Widget?", "default": "built-in selection icon" }
      },
      "formatting": {
        "searchPlaceholder": { "type": "String?", "default": "null" },
        "height": { "type": "double?", "default": "null" },
        "width": { "type": "double?", "default": "null" }
      },
      "style": {
        "style": { "type": "CometChatGroupMembersStyle?", "default": "null" }
      }
    },
    "events": [
      { "name": "CometChatGroupEvents.ccGroupMemberScopeChanged", "payload": "Action, GroupMember, String newScope, String oldScope, Group", "description": "Member scope changed" },
      { "name": "CometChatGroupEvents.ccGroupMemberBanned", "payload": "Action, GroupMember, User bannedBy, Group", "description": "Member banned from group" },
      { "name": "CometChatGroupEvents.ccGroupMemberKicked", "payload": "Action, GroupMember, User kickedBy, Group", "description": "Member kicked from group" }
    ],
    "sdkListeners": [
      "onGroupMemberScopeChanged",
      "onGroupMemberKicked",
      "onGroupMemberLeft",
      "onGroupMemberBanned",
      "onGroupMemberJoined",
      "onMemberAddedToGroup",
      "onUserOnline",
      "onUserOffline"
    ],
    "compositionExample": {
      "description": "Group member list wired to group details or member actions",
      "components": [
        "CometChatGroupMembers",
        "CometChatGroups",
        "CometChatMessages"
      ],
      "flow": "CometChatGroups emits Group -> pass to CometChatGroupMembers -> onItemTap emits GroupMember for actions"
    },
    "types": {
      "GroupMember": {
        "uid": "String",
        "name": "String",
        "avatar": "String?",
        "scope": "String (owner/admin/moderator/participant)",
        "joinedAt": "DateTime?"
      },
      "CometChatOption": {
        "id": "String?",
        "title": "String?",
        "icon": "String?",
        "iconWidget": "Widget?",
        "onClick": "VoidCallback?"
      },
      "SelectionMode": {
        "single": "SelectionMode.single",
        "multiple": "SelectionMode.multiple",
        "none": "SelectionMode.none"
      }
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatGroupMembers` displays all members of a group with their roles (owner, admin, moderator, participant). It provides member management actions like kick, ban, and scope change. Wire it to `CometChatGroups` to show members when a group is selected.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    class GroupMembersScreen extends StatelessWidget {
      final Group group;

      const GroupMembersScreen({super.key, required this.group});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatGroupMembers(
              group: group,
              onItemTap: (groupMember) {
                // Handle member tap - show profile or actions
                print("Tapped: ${groupMember.name}");
              },
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/cTCXebw8IhR7IiJw/images/3e09e39d-group_members-697dfef4da0b9d955ec567bd58b54bfb.png?fit=max&auto=format&n=cTCXebw8IhR7IiJw&q=85&s=73e8bb18a5fdb1acd9039a0f1b00feec" width="2560" height="1600" data-path="images/3e09e39d-group_members-697dfef4da0b9d955ec567bd58b54bfb.png" />
</Frame>

The `CometChatGroupMembers` widget is composed of the following BaseWidgets:

| Widgets | Description |
| - | - |
| [CometChatListBase](/ui-kit/flutter/v5/components-overview) | Container widget with title, search functionality, and background settings |
| [CometChatListItem](/ui-kit/flutter/v5/components-overview) | Renders member information with title, subtitle, leading, and trailing widgets |

***

## Minimal Render

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    class GroupMembersDemo extends StatelessWidget {
      final Group group;

      const GroupMembersDemo({super.key, required this.group});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatGroupMembers(
              group: group,
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

You can also launch it using `Navigator.push`:

```dart theme={null}
Navigator.push(
  context, 
  MaterialPageRoute(
    builder: (context) => CometChatGroupMembers(
      group: Group(guid: "group_id", name: "Group Name", type: GroupTypeConstants.public),
    ),
  ),
);
```

***

## Filtering Group Members

Pass a `GroupMembersRequestBuilder` to `groupMembersRequestBuilder`. Pass the builder instance — not the result of `.build()`.

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

### Filter Recipes

| Recipe | Code |
| - | - |
| Limit to 10 per page | `GroupMembersRequestBuilder(guid)..limit = 10` |
| Search by keyword | `GroupMembersRequestBuilder(guid)..searchKeyword = "john"` |
| Filter by scopes | `GroupMembersRequestBuilder(guid)..scopes = ["admin", "moderator"]` |

Default page size is 30. The component uses infinite scroll — the next page loads as the user scrolls to the bottom.

### GroupMembersRequestBuilder Properties

| Property | Description | Code |
| - | - | - |
| `guid` | Group ID (required) | `GroupMembersRequestBuilder("group_id")` |
| `limit` | Number of members to fetch per request | `..limit = 30` |
| `searchKeyword` | Search members by name | `..searchKeyword = "John"` |
| `scopes` | Filter by member scopes | `..scopes = ["admin"]` |
| `build()` | Builds and returns a `GroupMembersRequest` object | `.build()` |

### Custom Protocol Builder

Use `GroupMembersBuilderProtocol` to customize both the initial list and search results:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    class CustomProtocolBuilder extends GroupMembersBuilderProtocol {
      const CustomProtocolBuilder(super.builder);

      @override
      GroupMembersRequest getRequest() {
        return requestBuilder.build();
      }

      @override
      GroupMembersRequest getSearchRequest(String val) {
        requestBuilder.searchKeyword = val;
        return requestBuilder.build();
      }
    }

    // Usage
    CometChatGroupMembers(
      group: group,
      groupMembersProtocol: CustomProtocolBuilder(
        GroupMembersRequestBuilder(group.guid)..scopes = ["admin", "moderator"],
      ),
    )
    ```
  </Tab>
</Tabs>

***

## Actions and Events

### Callback Props

#### onItemTap

Fires when a member row is tapped. Use for showing member profile or custom actions.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onItemTap: (groupMember) {
        print("Selected: ${groupMember.name}");
      },
    )
    ```
  </Tab>
</Tabs>

#### onItemLongPress

Fires when a member row is long-pressed. Useful for showing context menus.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onItemLongPress: (groupMember) {
        // Show custom context menu
      },
    )
    ```
  </Tab>
</Tabs>

#### onSelection

Fires when members are selected in multi-select mode. Requires `selectionMode` to be set.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      selectionMode: SelectionMode.multiple,
      activateSelection: ActivateSelection.onClick,
      onSelection: (selectedList) {
        print("Selected ${selectedList?.length ?? 0} members");
      },
    )
    ```
  </Tab>
</Tabs>

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      onError: (error) {
        print("CometChatGroupMembers error: $error");
      },
    )
    ```
  </Tab>
</Tabs>

#### onBack

Fires when the back button is pressed.

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

#### onLoad

Fires when the member list is successfully loaded.

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

#### onEmpty

Fires when the member list is empty.

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

### Global UI Events

`CometChatGroupEvents` emits events subscribable from anywhere in the application. Add a listener in `initState` and remove it in `dispose`.

| Event | Fires when | Payload |
| - | - | - |
| `ccGroupMemberScopeChanged` | A member's scope is changed | `Action, User, String scopeChangedTo, String scopeChangedFrom, Group` |
| `ccGroupMemberBanned` | A member is banned | `Action, User, User bannedBy, Group` |
| `ccGroupMemberKicked` | A member is kicked | `Action, User, User kickedBy, Group` |

When to use: sync external UI with member changes. For example, update a member count badge when a member is kicked.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:cometchat_sdk/models/action.dart' as cc;

    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 ccGroupMemberScopeChanged(cc.Action message, User updatedUser, String scopeChangedTo, String scopeChangedFrom, Group group) {
        print("${updatedUser.name} scope changed to $scopeChangedTo");
      }

      @override
      void ccGroupMemberBanned(cc.Action message, User bannedUser, User bannedBy, Group bannedFrom) {
        print("${bannedUser.name} was banned from ${bannedFrom.name}");
      }

      @override
      void ccGroupMemberKicked(cc.Action message, User kickedUser, User kickedBy, Group kickedFrom) {
        print("${kickedUser.name} was kicked from ${kickedFrom.name}");
      }

      @override
      Widget build(BuildContext context) {
        return const Placeholder();
      }
    }
    ```
  </Tab>
</Tabs>

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

The component listens to these SDK events internally. No manual attachment needed unless additional side effects are required.

| SDK Listener | Internal behavior |
| - | - |
| `onGroupMemberScopeChanged` | Updates member scope badge |
| `onGroupMemberKicked` | Removes member from list |
| `onGroupMemberLeft` | Removes member from list |
| `onGroupMemberBanned` | Removes member from list |
| `onGroupMemberJoined` | Adds new member to list |
| `onMemberAddedToGroup` | Adds new member to list |
| `onUserOnline` | Updates online status indicator |
| `onUserOffline` | Updates offline status indicator |

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a member parameter receive the `GroupMember` object for that row.

| Slot | Signature | Replaces |
| - | - | - |
| `listItemView` | `Widget Function(GroupMember)` | Entire list item row |
| `leadingView` | `Widget? Function(BuildContext, GroupMember)` | Avatar / left section |
| `titleView` | `Widget? Function(BuildContext, GroupMember)` | Member name |
| `subtitleView` | `Widget? Function(BuildContext, GroupMember)` | Secondary text |
| `trailingView` | `Function(BuildContext, GroupMember)` | Scope badge / right section |
| `loadingStateView` | `WidgetBuilder` | Loading spinner |
| `emptyStateView` | `WidgetBuilder` | Empty state |
| `errorStateView` | `WidgetBuilder` | Error state |
| `setOptions` | `List<CometChatOption>? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (replaces default) |
| `addOptions` | `List<CometChatOption>? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (adds to default) |
| `appBarOptions` | `List<Widget>` | App bar action widgets |

### listItemView

Replace the entire list item row.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/IswwmAgbm47WtdFq/images/c8eb9b62-group_members_list_item_view-cf401d5b63da208e8774652e765bee9d.png?fit=max&auto=format&n=IswwmAgbm47WtdFq&q=85&s=3181c741a58b117e44a11cd97aa1e5d9" width="2560" height="1600" data-path="images/c8eb9b62-group_members_list_item_view-cf401d5b63da208e8774652e765bee9d.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      listItemView: (groupMember) {
        return ListTile(
          leading: CometChatAvatar(
            image: groupMember.avatar,
            name: groupMember.name,
          ),
          title: Text(groupMember.name ?? ''),
          subtitle: Text(groupMember.scope ?? 'participant'),
          trailing: Icon(Icons.chevron_right),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### leadingView

Replace the avatar / left section. Online status indicator example.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      leadingView: (context, groupMember) {
        return Stack(
          children: [
            CometChatAvatar(
              image: groupMember.avatar,
              name: groupMember.name,
              style: CometChatAvatarStyle(borderRadius: BorderRadius.circular(20)),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Container(
                width: 12,
                height: 12,
                decoration: BoxDecoration(
                  color: groupMember.status == "online" ? Color(0xFF09C26F) : Colors.grey,
                  shape: BoxShape.circle,
                  border: Border.all(color: Colors.white, width: 2),
                ),
              ),
            ),
          ],
        );
      },
    )
    ```
  </Tab>
</Tabs>

### titleView

Replace the member name. Role badge inline example.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      titleView: (context, groupMember) {
        return Row(
          children: [
            Text(
              groupMember.name ?? '',
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
            ),
            if (groupMember.scope == GroupMemberScope.owner) ...[
              SizedBox(width: 4),
              Icon(Icons.star, size: 16, color: Color(0xFFF76808)),
            ],
          ],
        );
      },
    )
    ```
  </Tab>
</Tabs>

### subtitleView

Replace the secondary text. Join date example.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/cTCXebw8IhR7IiJw/images/430db317-group_members_subtitle_view-862d8a258542ccd62c21f79010bdf225.png?fit=max&auto=format&n=cTCXebw8IhR7IiJw&q=85&s=de29c11ad22835e551c762554ba5fad5" width="2560" height="1600" data-path="images/430db317-group_members_subtitle_view-862d8a258542ccd62c21f79010bdf225.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      subtitleView: (context, groupMember) {
        final dateTime = groupMember.joinedAt ?? DateTime.now();
        return Text(
          "Joined ${DateFormat('dd/MM/yyyy').format(dateTime)}",
          style: TextStyle(color: Color(0xFF727272), fontSize: 14),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### trailingView

Replace the scope badge / right section. Custom scope badge example.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/g_KAMkRj71rxDRMU/images/64ba3e26-group_members_tail_view-8a1e8ebdac9450a309009779b1033bea.png?fit=max&auto=format&n=g_KAMkRj71rxDRMU&q=85&s=377bfdf1044469ae7b37a950fa60320e" width="2560" height="1600" data-path="images/64ba3e26-group_members_tail_view-8a1e8ebdac9450a309009779b1033bea.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      trailingView: (context, groupMember) {
        Color backgroundColor = Color(0xFFEDEAFA);
        Color textColor = Color(0xFF6852D6);
        String scope = groupMember.scope ?? GroupMemberScope.participant;

        if (groupMember.uid == group.owner) {
          scope = GroupMemberScope.owner;
          backgroundColor = Color(0xFF6852D6);
          textColor = Colors.white;
        }

        return Container(
          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(1000),
          ),
          child: Text(
            scope.capitalizeFirst ?? "",
            style: TextStyle(color: textColor, fontSize: 12, fontWeight: FontWeight.w400),
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### setOptions

Replace the context menu / long-press actions on each member item.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      setOptions: (group, groupMember, controller, context) {
        return [
          CometChatOption(
            id: "view_profile",
            title: "View Profile",
            iconWidget: Icon(Icons.person_outline),
            onClick: () {
              // Navigate to member profile
            },
          ),
          CometChatOption(
            id: "message",
            title: "Send Message",
            iconWidget: Icon(Icons.message_outlined),
            onClick: () {
              // Start direct message
            },
          ),
        ];
      },
    )
    ```
  </Tab>
</Tabs>

### addOptions

Add to the existing context menu actions without removing defaults.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      addOptions: (group, groupMember, controller, context) {
        return [
          CometChatOption(
            id: "report",
            title: "Report User",
            iconWidget: Icon(Icons.flag_outlined),
            onClick: () {
              // Report user logic
            },
          ),
        ];
      },
    )
    ```
  </Tab>
</Tabs>

### appBarOptions

Add custom widgets to the app bar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/g_KAMkRj71rxDRMU/images/6754e069-group_members_menus-c5268dbd29c6734264dd5022aedb1ea8.png?fit=max&auto=format&n=g_KAMkRj71rxDRMU&q=85&s=dc0ed7c936c44647091147c41a992ba4" width="2560" height="1600" data-path="images/6754e069-group_members_menus-c5268dbd29c6734264dd5022aedb1ea8.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      appBarOptions: [
        IconButton(
          onPressed: () {
            // Navigate to add members
          },
          icon: Icon(Icons.person_add_alt_1, color: Color(0xFF6852D6)),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### loadingStateView

Custom view displayed while members are being fetched.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      loadingStateView: (context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircularProgressIndicator(),
              SizedBox(height: 16),
              Text("Loading members..."),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### emptyStateView

Custom view displayed when no members are found.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      emptyStateView: (context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.people_outline, size: 64, color: Color(0xFF727272)),
              SizedBox(height: 16),
              Text("No members found"),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### errorStateView

Custom view displayed when an error occurs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      errorStateView: (context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.error_outline, size: 64, color: Colors.red),
              SizedBox(height: 16),
              Text("Failed to load members"),
              ElevatedButton(
                onPressed: () {
                  // Retry logic
                },
                child: Text("Retry"),
              ),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

## Styling

Set `CometChatGroupMembersStyle` to customize the appearance.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      style: CometChatGroupMembersStyle(
        titleStyle: TextStyle(color: Color(0xFFF76808)),
        separatorColor: Color(0xFFF76808),
        ownerMemberScopeBackgroundColor: Color(0xFFF76808),
        adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
        adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
        adminMemberScopeTextColor: Color(0xFFF76808),
        moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
        moderatorMemberScopeTextColor: Color(0xFFF76808),
        backIconColor: Color(0xFFF76808),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/LUAnk4kNde8CLq7p/images/7dd6eb5e-group_members_styling-b9b1f40be76f7e4137dbd7dc7e10141c.png?fit=max&auto=format&n=LUAnk4kNde8CLq7p&q=85&s=3cf8e71e2feb3709aec5a1c9adeaa21c" width="2560" height="1600" data-path="images/7dd6eb5e-group_members_styling-b9b1f40be76f7e4137dbd7dc7e10141c.png" />
</Frame>

### Style Properties

| Property | Type | Description |
| - | - | - |
| `backgroundColor` | `Color?` | Background color of the component |
| `border` | `BoxBorder?` | Border for the widget |
| `borderRadius` | `BorderRadiusGeometry?` | Border radius for the widget |
| `titleStyle` | `TextStyle?` | Style for the header title |
| `backIconColor` | `Color?` | Back button icon color |
| `searchBackground` | `Color?` | Background color of search box |
| `searchBorderRadius` | `BorderRadius?` | Border radius for search box |
| `searchTextStyle` | `TextStyle?` | Style for search input text |
| `searchPlaceholderStyle` | `TextStyle?` | Style for search placeholder |
| `searchIconColor` | `Color?` | Search icon color |
| `loadingIconColor` | `Color?` | Loading indicator color |
| `emptyStateTextStyle` | `TextStyle?` | Style for empty state title |
| `emptyStateTextColor` | `Color?` | Color for empty state title text |
| `emptyStateSubtitleTextStyle` | `TextStyle?` | Style for empty state subtitle |
| `emptyStateSubtitleTextColor` | `Color?` | Color for empty state subtitle text |
| `errorStateTextStyle` | `TextStyle?` | Style for error state title |
| `errorStateSubtitleStyle` | `TextStyle?` | Style for error state subtitle |
| `onlineStatusColor` | `Color?` | Online status indicator color |
| `separatorColor` | `Color?` | Color of list item separators |
| `separatorHeight` | `double?` | Height of list item separators |
| `listPadding` | `EdgeInsetsGeometry?` | Padding for the list |
| `ownerMemberScopeBackgroundColor` | `Color?` | Background color for owner scope badge |
| `ownerMemberScopeTextColor` | `Color?` | Text color for owner scope badge |
| `ownerMemberScopeBorder` | `BoxBorder?` | Border for owner scope badge |
| `ownerMemberScopeTextStyle` | `TextStyle?` | Text style for owner scope badge |
| `adminMemberScopeBackgroundColor` | `Color?` | Background color for admin scope badge |
| `adminMemberScopeTextColor` | `Color?` | Text color for admin scope badge |
| `adminMemberScopeBorder` | `BoxBorder?` | Border for admin scope badge |
| `adminMemberScopeTextStyle` | `TextStyle?` | Text style for admin scope badge |
| `moderatorMemberScopeBackgroundColor` | `Color?` | Background color for moderator scope badge |
| `moderatorMemberScopeTextColor` | `Color?` | Text color for moderator scope badge |
| `moderatorMemberScopeBorder` | `BoxBorder?` | Border for moderator scope badge |
| `moderatorMemberScopeTextStyle` | `TextStyle?` | Text style for moderator scope badge |
| `checkboxCheckedBackgroundColor` | `Color?` | Background color for checked checkbox |
| `checkboxBackgroundColor` | `Color?` | Background color for unchecked checkbox |
| `checkboxSelectedIconColor` | `Color?` | Color for checkbox icon when selected |
| `checkboxBorder` | `BorderSide?` | Border for checkbox |
| `checkboxBorderRadius` | `BorderRadiusGeometry?` | Border radius for checkbox |
| `listItemSelectedBackgroundColor` | `Color?` | Background color for selected list item |
| `submitIconColor` | `Color?` | Color for submit icon |
| `retryButtonBackgroundColor` | `Color?` | Background color for retry button |
| `retryButtonTextColor` | `Color?` | Text color for retry button |
| `retryButtonTextStyle` | `TextStyle?` | Text style for retry button |
| `retryButtonBorder` | `BorderSide?` | Border for retry button |
| `retryButtonBorderRadius` | `BorderRadiusGeometry?` | Border radius for retry button |
| `avatarStyle` | `CometChatAvatarStyle?` | Style for member avatars |
| `statusIndicatorStyle` | `CometChatStatusIndicatorStyle?` | Style for status indicators |
| `listItemStyle` | `ListItemStyle?` | Style for list items |
| `confirmDialogStyle` | `CometChatConfirmDialogStyle?` | Style for confirmation dialogs |
| `changeScopeStyle` | `CometChatChangeScopeStyle?` | Style for change scope dialog |
| `optionsBackgroundColor` | `Color?` | Background color for options menu |
| `optionsIconColor` | `Color?` | Color for options icon |
| `optionsTextStyle` | `TextStyle?` | Text style for options |

***

## Common Patterns

### Hide member management options

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      hideKickMemberOption: true,
      hideBanMemberOption: true,
      hideScopeChangeOption: true,
    )
    ```
  </Tab>
</Tabs>

### Multi-select with selection callback

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      selectionMode: SelectionMode.multiple,
      activateSelection: ActivateSelection.onClick,
      onSelection: (selectedMembers) {
        if (selectedMembers != null && selectedMembers.isNotEmpty) {
          print("Selected ${selectedMembers.length} members");
          // Perform batch action on selected members
        }
      },
    )
    ```
  </Tab>
</Tabs>

### Hide all chrome — minimal list

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      hideSearch: true,
      hideAppbar: true,
      hideSeparator: true,
    )
    ```
  </Tab>
</Tabs>

### Filter admins and moderators only

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatGroupMembers(
      group: group,
      groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
        ..scopes = [GroupMemberScope.admin, GroupMemberScope.moderator],
    )
    ```
  </Tab>
</Tabs>

***

## Props Reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `group` | `Group` | **required** | The group object to fetch members from |
| `groupMembersProtocol` | `GroupMembersBuilderProtocol?` | `null` | Custom request builder protocol |
| `groupMembersRequestBuilder` | `GroupMembersRequestBuilder?` | `null` | Custom request builder for filtering members |
| `searchKeyword` | `String?` | `null` | Pre-fills search and filters list |
| `controllerTag` | `String?` | `null` | Tag for controller management |
| `onSelection` | `Function(List<GroupMember>?)?` | `null` | Callback when members are selected |
| `onItemTap` | `Function(GroupMember)?` | `null` | Callback on tapping a member item |
| `onItemLongPress` | `Function(GroupMember)?` | `null` | Callback on long pressing a member item |
| `onBack` | `VoidCallback?` | `null` | Callback on closing this screen |
| `onError` | `OnError?` | `null` | Callback in case any error occurs |
| `onLoad` | `OnLoad<GroupMember>?` | `null` | Callback when list is fetched and loaded |
| `onEmpty` | `OnEmpty?` | `null` | Callback when the list is empty |
| `stateCallBack` | `Function(CometChatGroupMembersController)?` | `null` | Access controller functions from parent |
| `showBackButton` | `bool` | `true` | Show/hide back button |
| `hideSearch` | `bool` | `false` | Show/hide search input |
| `hideSeparator` | `bool?` | `null` | Toggle visibility of separator |
| `hideError` | `bool?` | `null` | Toggle visibility of error dialog |
| `hideAppbar` | `bool?` | `null` | Hides the appbar |
| `usersStatusVisibility` | `bool?` | `true` | Hide status indicator on avatar |
| `hideKickMemberOption` | `bool?` | `null` | Hide kick member option |
| `hideBanMemberOption` | `bool?` | `null` | Hide ban member option |
| `hideScopeChangeOption` | `bool?` | `null` | Hide scope change option |
| `selectionMode` | `SelectionMode?` | `null` | Selection mode (single/multiple/none) |
| `activateSelection` | `ActivateSelection?` | `null` | When to activate selection |
| `subtitleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom subtitle for each member |
| `listItemView` | `Widget Function(GroupMember)?` | `null` | Custom view for each member |
| `trailingView` | `Function(BuildContext, GroupMember)?` | `null` | Custom trailing widget |
| `leadingView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom leading view |
| `titleView` | `Widget? Function(BuildContext, GroupMember)?` | `null` | Custom title view |
| `loadingStateView` | `WidgetBuilder?` | `null` | View for loading state |
| `emptyStateView` | `WidgetBuilder?` | `null` | View for empty state |
| `errorStateView` | `WidgetBuilder?` | `null` | View for error state |
| `backButton` | `Widget?` | `null` | Custom back button widget |
| `searchBoxIcon` | `Widget?` | `null` | Custom search icon |
| `selectIcon` | `Widget?` | `null` | Custom selection icon |
| `submitIcon` | `Widget?` | `null` | Custom selection complete icon |
| `appBarOptions` | `List<Widget>?` | `null` | App bar options |
| `options` | `List<CometChatOption>? Function(...)?` | `null` | Options visible at slide of each member |
| `setOptions` | `List<CometChatOption>? Function(...)?` | `null` | Replace default long press actions |
| `addOptions` | `List<CometChatOption>? Function(...)?` | `null` | Add to default long press actions |
| `searchPlaceholder` | `String?` | `null` | Placeholder text of search input |
| `height` | `double?` | `null` | Height of the widget |
| `width` | `double?` | `null` | Width of the widget |
| `style` | `CometChatGroupMembersStyle?` | `null` | Style for the component |
| `controller` | `ScrollController?` | `null` | Scroll controller for the list |

***

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

  <Card title="Add Members" icon="user-plus" href="/ui-kit/flutter/v5/group-members">
    Add new members to a group
  </Card>

  <Card title="Banned Members" icon="ban" href="/ui-kit/flutter/v5/group-members">
    View and manage banned members
  </Card>

  <Card title="Theming" icon="palette" href="/ui-kit/flutter/v5/theme-introduction">
    Learn how to customize the look and feel
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.