StreamMemberListView

A widget for displaying and selecting members in a list view.

Find the pub.dev documentation here

Background

A list of members is required for many different purposes, for example, showing a list of users in a Channel. The StreamMemberListView displays a list of members.

note

Make sure to check the StreamMemberListController documentation for more information on how to use the controller to manipulate the StreamMemberListView.

Basic Example

class MemberListPage extends StatefulWidget {
  const MemberListPage({super.key});

  @override
  State<MemberListPage> createState() => _MemberListPageState();
}

class _MemberListPageState extends State<MemberListPage> {
  late final StreamMemberListController _memberListController =
      StreamMemberListController(
    channel: StreamChannel.of(context).channel,
    limit: 25,
    filter: Filter.and(
      [Filter.notEqual('id', StreamChat.of(context).currentUser!.id)],
    ),
    sort: [
      const SortOption(
        'name',
        direction: 1,
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () => _memberListController.refresh(),
      child: StreamMemberListView(
        controller: _memberListController,
      ),
    );
  }
}

Customize The Member Items

You can use your own widget for the member items using the itemBuilder parameter.

StreamMemberListView(
  // ...
  itemBuilder: (context, members, index, defaultWidget) {
    return Text(members[index].user!.name);
  },
),

Selecting Members

The StreamMemberListView widget allows selecting members in a list. The defaultWidget returned can be customized to indicate that it has been selected.

Set<Member> _selectedMembers = {};

StreamMemberListView(
  controller: _memberListController,
  itemBuilder: (context, members, index, defaultWidget) {
    return defaultWidget.copyWith(
      selected: _selectedMembers.contains(members[index]),
    );
  },
  onMemberTap: (member) {
    setState(() {
      _selectedMembers.add(member);
    });
  },
);