Skip to main content
Version: v7

Members State

A widget for controlling a list of members.

Find the documentation here


The StreamMemberListController is a controller class that allows you to control a list of users. StreamMemberListController is a required parameter of the StreamMemberListView widget. Check the StreamMemberListView documentation to read more about that.

Basic Example

Building a custom member list is a very common task. Here is an example of how to use the StreamMemberListController to build a simple list with pagination.

First, create an instance of the StreamMemberListController and provide it with the StreamChatClient instance. You can also add a Filter, a list of SortOptions, and other pagination-related parameters.

class MemberListPageState extends State<MemberListPage> {
/// Controller used for loading more data and controlling pagination in
/// [StreamMemberListController].
late final memberListController = StreamMemberListController(
channel: StreamChannel.of(context).channel,

Make sure you call memberListController.doInitialLoad() to load the initial data and memberListController.dispose() when the controller is no longer required.

void initState() {

void dispose() {

The StreamMemberListController is basically a PagedValueNotifier that notifies you when the list of members has changed. You can use a PagedValueListenableBuilder to build your UI depending on the latest members.

Widget build(BuildContext context) => Scaffold(
body: PagedValueListenableBuilder<int, Member>(
valueListenable: memberListController,
builder: (context, value, child) {
return value.when(
(members, nextPageKey, error) => LazyLoadScrollView(
onEndOfPage: () async {
if (nextPageKey != null) {
child: ListView.builder(
/// We're using the members length when there are no more
/// pages to load and there are no errors with pagination.
/// In case we need to show a loading indicator or and error
/// tile we're increasing the count by 1.
itemCount: (nextPageKey != null || error != null)
? members.length + 1
: members.length,
itemBuilder: (BuildContext context, int index) {
if (index == members.length) {
if (error != null) {
return TextButton(
onPressed: () {
child: Text(error.message),
return const CircularProgressIndicator();

final _item = members[index];
return ListTile(
title: Text(_item.user?.name ?? ''),
loading: () => const Center(
child: SizedBox(
height: 100,
width: 100,
child: CircularProgressIndicator(),
error: (e) => Center(
child: Text(
'Oh no, something went wrong. '
'Please check your config. $e',

In this case, we're using the LazyLoadScrollView widget to load more data when the user scrolls to the bottom of the list.

Did you find this page helpful?