Members State

A widget for controlling a list of members.

Find the pub.dev documentation here

Background

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.

@override
void initState() {
  memberListController.doInitialLoad();
  super.initState();
}

@override
void dispose() {
  memberListController.dispose();
  super.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.

@override
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) {
                  memberListController.loadMore(nextPageKey);
                }
              },
              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: () {
                            memberListController.retry();
                          },
                          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.