Group Members - CometChat Docs

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

Where It Fits

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

Dart

CometChatGroupMembers(
  group: group,
  onItemTap: (groupMember) {
    // Navigate to member profile or chat
  },
)

Quick Start

Using Navigator:

Dart

Navigator.push(context, MaterialPageRoute(
  builder: (context) => CometChatGroupMembers(group: group),
));

Embedding as a widget:

Dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: CometChatGroupMembers(group: group),
    ),
  );
}

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

Filtering Members

Pass a GroupMembersRequestBuilder to control what loads:

Dart

CometChatGroupMembers(
  group: group,
  groupMembersRequestBuilder: GroupMembersRequestBuilder(group.guid)
    ..limit = 20
    ..searchKeyword = "john",
)

Filter Recipes

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

Actions and Events

Callback Methods

`onItemTap`

Fires when a member row is tapped.

Dart

CometChatGroupMembers(
  group: group,
  onItemTap: (groupMember) {
    // Navigate to member profile
  },
)

`onItemLongPress`

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

Dart

CometChatGroupMembers(
  group: group,
  onItemLongPress: (groupMember) {
    // Custom long press behavior
  },
)

`onBack`

Fires when the user presses the back button.

Dart

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

`onSelection`

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

Dart

CometChatGroupMembers(
  group: group,
  selectionMode: SelectionMode.multiple,
  onSelection: (selectedMembers, context) {
    // Handle selected members
  },
)

`onError`

Fires on internal errors.

Dart

CometChatGroupMembers(
  group: group,
  onError: (e) {
    debugPrint("Error: ${e.message}");
  },
)

`onLoad`

Fires when the list is successfully fetched.

Dart

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

`onEmpty`

Fires when the list is empty after loading.

Dart

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

Global Events

The component emits events via CometChatGroupEvents:

Dart

class _YourScreenState extends State<YourScreen> with CometChatGroupEventListener {
  @override
  void initState() {
    super.initState();
    CometChatGroupEvents.addGroupsListener("listenerId", this);
  }

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

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

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

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

SDK Events (Real-Time, Automatic)

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

Functionality

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

Custom View Slots

Leading View

Dart

CometChatGroupMembers(
  group: group,
  leadingView: (context, groupMember) {
    return CircleAvatar(
      child: Text(groupMember.name?[0] ?? ""),
    );
  },
)

Title View

Dart

CometChatGroupMembers(
  group: group,
  titleView: (context, groupMember) {
    return Text(
      groupMember.name ?? "",
      style: TextStyle(fontWeight: FontWeight.bold),
    );
  },
)

Subtitle View

Dart

CometChatGroupMembers(
  group: group,
  subtitleView: (context, groupMember) {
    return Text(
      groupMember.scope ?? "participant",
      style: TextStyle(color: Color(0xFF727272), fontSize: 14),
    );
  },
)

Trailing View

Dart

CometChatGroupMembers(
  group: group,
  trailingView: (context, groupMember) {
    return Chip(label: Text(groupMember.scope ?? ""));
  },
)

List Item View

Dart

CometChatGroupMembers(
  group: group,
  listItemView: (groupMember) {
    return ListTile(
      leading: CircleAvatar(child: Text(groupMember.name?[0] ?? "")),
      title: Text(groupMember.name ?? ""),
      subtitle: Text(groupMember.scope ?? "participant"),
      trailing: Chip(label: Text(groupMember.scope ?? "")),
    );
  },
)

State Views

Dart

CometChatGroupMembers(
  group: group,
  emptyStateView: (context) => Center(child: Text("No members")),
  errorStateView: (context) => Center(child: Text("Something went wrong")),
  loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)

Dart

// Replace all options
CometChatGroupMembers(
  group: group,
  setOptions: (groupMember, bloc, context) {
    return [
      CometChatOption(
        id: "message",
        iconWidget: Icon(Icons.message),
        title: "Message",
        onClick: () {
          // Open chat with this member
        },
      ),
    ];
  },
)

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

Advanced

BLoC Access

Provide a custom GroupMembersBloc:

Dart

CometChatGroupMembers(
  group: group,
  groupMembersBloc: CustomGroupMembersBloc(),
)

Public BLoC Events

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

For ListBase override hooks (onItemAdded, onItemRemoved, onItemUpdated, onListCleared, onListReplaced), see BLoC & Data — ListBase Hooks.

Public BLoC Methods

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

Permission-Based Actions

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

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

Style

Dart

CometChatGroupMembers(
  group: group,
  groupMembersStyle: CometChatGroupMembersStyle(
    avatarStyle: CometChatAvatarStyle(
      borderRadius: BorderRadius.circular(8),
      backgroundColor: Color(0xFFFBAA75),
    ),
    statusIndicatorStyle: CometChatStatusIndicatorStyle(),
    changeScopeStyle: CometChatChangeScopeStyle(),
    confirmDialogStyle: CometChatConfirmDialogStyle(),
  ),
)

Style Properties

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

Next Steps

Groups

Browse available groups

Group Chat Guide

Complete group chat implementation

Component Styling

Detailed styling reference

Conversations

Browse recent conversations

​Where It Fits

​Quick Start

​Filtering Members

​Filter Recipes

​Actions and Events

​Callback Methods

​onItemTap

​onItemLongPress

​onBack

​onSelection

​onError

​onLoad

​onEmpty

​Global Events

​SDK Events (Real-Time, Automatic)

​Functionality

​Custom View Slots

​Leading View

​Title View

​Subtitle View

​Trailing View

​List Item View

​State Views

​Menu Options

​Advanced

​BLoC Access

​Public BLoC Events

​Public BLoC Methods

​Permission-Based Actions

​Style

​Style Properties

​Next Steps