Group Members - CometChat Docs

AI Agent Component Spec

{
  "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"
    }
  }
}

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.

Dart

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}");
          },
        ),
      ),
    );
  }
}

The CometChatGroupMembers widget is composed of the following BaseWidgets:

Widgets	Description
CometChatListBase	Container widget with title, search functionality, and background settings
CometChatListItem	Renders member information with title, subtitle, leading, and trailing widgets

Minimal Render

Dart

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,
        ),
      ),
    );
  }
}

You can also launch it using Navigator.push:

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().

Dart

CometChatGroupMembers(
  group: group,
  groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
    ..limit = 10,
)

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:

Dart

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"],
  ),
)

Actions and Events

Callback Props

onItemTap

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

Dart

CometChatGroupMembers(
  group: group,
  onItemTap: (groupMember) {
    print("Selected: ${groupMember.name}");
  },
)

onItemLongPress

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

Dart

CometChatGroupMembers(
  group: group,
  onItemLongPress: (groupMember) {
    // Show custom context menu
  },
)

onSelection

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

Dart

CometChatGroupMembers(
  group: group,
  selectionMode: SelectionMode.multiple,
  activateSelection: ActivateSelection.onClick,
  onSelection: (selectedList) {
    print("Selected ${selectedList?.length ?? 0} members");
  },
)

onError

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

Dart

CometChatGroupMembers(
  group: group,
  onError: (error) {
    print("CometChatGroupMembers error: $error");
  },
)

onBack

Fires when the back button is pressed.

Dart

CometChatGroupMembers(
  group: group,
  showBackButton: true,
  onBack: () {
    Navigator.pop(context);
  },
)

onLoad

Fires when the member list is successfully loaded.

Dart

CometChatGroupMembers(
  group: group,
  onLoad: (list) {
    print("Loaded ${list.length} members");
  },
)

onEmpty

Fires when the member list is empty.

Dart

CometChatGroupMembers(
  group: group,
  onEmpty: () {
    print("No members found");
  },
)

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.

Dart

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();
  }
}

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.

Dart

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),
    );
  },
)

leadingView

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

Dart

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),
            ),
          ),
        ),
      ],
    );
  },
)

titleView

Replace the member name. Role badge inline example.

Dart

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)),
        ],
      ],
    );
  },
)

subtitleView

Replace the secondary text. Join date example.

Dart

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),
    );
  },
)

trailingView

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

Dart

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),
      ),
    );
  },
)

setOptions

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

Dart

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
        },
      ),
    ];
  },
)

addOptions

Add to the existing context menu actions without removing defaults.

Dart

CometChatGroupMembers(
  group: group,
  addOptions: (group, groupMember, controller, context) {
    return [
      CometChatOption(
        id: "report",
        title: "Report User",
        iconWidget: Icon(Icons.flag_outlined),
        onClick: () {
          // Report user logic
        },
      ),
    ];
  },
)

appBarOptions

Add custom widgets to the app bar.

Dart

CometChatGroupMembers(
  group: group,
  appBarOptions: [
    IconButton(
      onPressed: () {
        // Navigate to add members
      },
      icon: Icon(Icons.person_add_alt_1, color: Color(0xFF6852D6)),
    ),
  ],
)

loadingStateView

Custom view displayed while members are being fetched.

Dart

CometChatGroupMembers(
  group: group,
  loadingStateView: (context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CircularProgressIndicator(),
          SizedBox(height: 16),
          Text("Loading members..."),
        ],
      ),
    );
  },
)

emptyStateView

Custom view displayed when no members are found.

Dart

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"),
        ],
      ),
    );
  },
)

errorStateView

Custom view displayed when an error occurs.

Dart

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"),
          ),
        ],
      ),
    );
  },
)

Styling

Set CometChatGroupMembersStyle to customize the appearance.

Dart

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),
  ),
)

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

Dart

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

Multi-select with selection callback

Dart

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
    }
  },
)

Hide all chrome — minimal list

Dart

CometChatGroupMembers(
  group: group,
  hideSearch: true,
  hideAppbar: true,
  hideSeparator: true,
)

Filter admins and moderators only

Dart

CometChatGroupMembers(
  group: group,
  groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
    ..scopes = [GroupMemberScope.admin, GroupMemberScope.moderator],
)

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

Groups

Display and manage available groups

Add Members

Add new members to a group

Banned Members

View and manage banned members

Theming

Learn how to customize the look and feel

​Where It Fits

​Minimal Render

​Filtering Group Members

​Filter Recipes

​GroupMembersRequestBuilder Properties

​Custom Protocol Builder

​Actions and Events

​Callback Props

​onItemTap

​onItemLongPress

​onSelection

​onError

​onBack

​onLoad

​onEmpty

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​listItemView

​leadingView

​titleView

​subtitleView

​trailingView

​setOptions

​addOptions

​appBarOptions

​loadingStateView

​emptyStateView

​errorStateView

​Styling

​Style Properties

​Common Patterns

​Hide member management options

​Multi-select with selection callback

​Hide all chrome — minimal list

​Filter admins and moderators only

​Props Reference