Group Members

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

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

---

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

---

Menu Options

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