> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.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. ```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?)?", "onBack": "VoidCallback?", "onError": "OnError?", "onLoad": "OnLoad?", "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? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?", "addOptions": "List? Function(Group, GroupMember, CometChatGroupMembersController, BuildContext)?", "appBarOptions": "List?" }, "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 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}"); }, ), ), ); } } ``` 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 ```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, ), ), ); } } ``` 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()`. ```dart theme={null} 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 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"], ), ) ``` *** ## Actions and Events ### Callback Props #### onItemTap Fires when a member row is tapped. Use for showing member profile or custom actions. ```dart theme={null} CometChatGroupMembers( group: group, onItemTap: (groupMember) { print("Selected: ${groupMember.name}"); }, ) ``` #### onItemLongPress Fires when a member row is long-pressed. Useful for showing context menus. ```dart theme={null} 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 theme={null} 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 theme={null} CometChatGroupMembers( group: group, onError: (error) { print("CometChatGroupMembers error: $error"); }, ) ``` #### onBack Fires when the back button is pressed. ```dart theme={null} CometChatGroupMembers( group: group, showBackButton: true, onBack: () { Navigator.pop(context); }, ) ``` #### onLoad Fires when the member list is successfully loaded. ```dart theme={null} CometChatGroupMembers( group: group, onLoad: (list) { print("Loaded ${list.length} members"); }, ) ``` #### onEmpty Fires when the member list is empty. ```dart theme={null} 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 theme={null} import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; import 'package:cometchat_sdk/models/action.dart' as cc; class _YourScreenState extends State 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? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (replaces default) | | `addOptions` | `List? Function(Group, GroupMember, Controller, BuildContext)` | Context menu actions (adds to default) | | `appBarOptions` | `List` | App bar action widgets | ### listItemView Replace the entire list item row. ```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), ); }, ) ``` ### leadingView Replace the avatar / left section. Online status indicator example. ```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), ), ), ), ], ); }, ) ``` ### titleView Replace the member name. Role badge inline example. ```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)), ], ], ); }, ) ``` ### subtitleView Replace the secondary text. Join date example. ```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), ); }, ) ``` ### trailingView Replace the scope badge / right section. Custom scope badge example. ```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), ), ); }, ) ``` ### setOptions Replace the context menu / long-press actions on each member item. ```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 }, ), ]; }, ) ``` ### addOptions Add to the existing context menu actions without removing defaults. ```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 }, ), ]; }, ) ``` ### appBarOptions Add custom widgets to the app bar. ```dart theme={null} 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 theme={null} 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 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"), ], ), ); }, ) ``` ### errorStateView Custom view displayed when an error occurs. ```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"), ), ], ), ); }, ) ``` *** ## Styling Set `CometChatGroupMembersStyle` to customize the appearance. ```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), ), ) ``` ### 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 theme={null} CometChatGroupMembers( group: group, hideKickMemberOption: true, hideBanMemberOption: true, hideScopeChangeOption: true, ) ``` ### Multi-select with selection callback ```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 } }, ) ``` ### Hide all chrome — minimal list ```dart theme={null} CometChatGroupMembers( group: group, hideSearch: true, hideAppbar: true, hideSeparator: true, ) ``` ### Filter admins and moderators only ```dart theme={null} 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?)?` | `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?` | `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?` | `null` | App bar options | | `options` | `List? Function(...)?` | `null` | Options visible at slide of each member | | `setOptions` | `List? Function(...)?` | `null` | Replace default long press actions | | `addOptions` | `List? 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 | *** Display and manage available groups Add new members to a group View and manage banned members Learn how to customize the look and feel