StreamUserListView
This commit is contained in:
@@ -22,6 +22,10 @@ The `StreamChannelListView` widget allows displaying a list of channels to a use
|
|||||||
ONLY the channels that the user is a part of. This section goes into setting up and using a `StreamChannelListView`
|
ONLY the channels that the user is a part of. This section goes into setting up and using a `StreamChannelListView`
|
||||||
widget.
|
widget.
|
||||||
|
|
||||||
|
:::note
|
||||||
|
Make sure to check the [StreamChannelListController](./stream_channel_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamChannelListView`.
|
||||||
|
:::
|
||||||
|
|
||||||
### Basic Example
|
### Basic Example
|
||||||
|
|
||||||
Here is a basic example of the `StreamChannelListView` widget. It consists of the main widget itself, a `StreamChannelListController` to control the list of channels and a callback to handle the tap of a channel.
|
Here is a basic example of the `StreamChannelListView` widget. It consists of the main widget itself, a `StreamChannelListController` to control the list of channels and a callback to handle the tap of a channel.
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
id: user_list_view
|
id: stream_user_list_view
|
||||||
sidebar_position: 7
|
sidebar_position: 7
|
||||||
title: UserListView
|
title: StreamUserListView
|
||||||
---
|
---
|
||||||
|
|
||||||
A Widget For Displaying And Selecting Users
|
A Widget For Displaying And Selecting Users
|
||||||
@@ -13,76 +13,81 @@ Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_
|
|||||||
### Background
|
### Background
|
||||||
|
|
||||||
A list of users is required for many different purposes: showing a list of users in a Channel,
|
A list of users is required for many different purposes: showing a list of users in a Channel,
|
||||||
selecting users to add in a channel, etc. The `UserListView` displays and allows selection of a list
|
selecting users to add in a channel, etc. The `StreamUserListView` displays a list
|
||||||
of users along with multiple display configurations like a list and grid.
|
of users.
|
||||||
|
|
||||||
|
:::note
|
||||||
|
Make sure to check the [StreamUserListController](./stream_user_list_controller.mdx) documentation for more information on how to use the controller to manipulate the `StreamUserListView`.
|
||||||
|
:::
|
||||||
|
|
||||||
### Basic Example
|
### Basic Example
|
||||||
|
|
||||||
Let's take a look at an example where we use the widget to autocomplete user names:
|
Let's take a look at an example where we use the widget to autocomplete user names:
|
||||||
|
|
||||||
```dart
|
```dart
|
||||||
class UsersListPage extends StatelessWidget {
|
class UserListPage extends StatefulWidget {
|
||||||
|
const UserListPage({
|
||||||
|
Key? key,
|
||||||
|
required this.client,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
final StreamChatClient client;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
State<UserListPage> createState() => _UserListPageState();
|
||||||
return Scaffold(
|
}
|
||||||
body: UsersBloc(
|
|
||||||
child: UsersListView(
|
class _UserListPageState extends State<UserListPage> {
|
||||||
filter: Filter.notEqual('id', StreamChat.of(context).user!.id),
|
late final _controller = StreamUserListController(
|
||||||
sort: [
|
client: widget.client,
|
||||||
SortOption(
|
limit: 25,
|
||||||
'name',
|
filter: Filter.and([
|
||||||
direction: 1,
|
Filter.notEqual('id', StreamChat.of(context).currentUser!.id),
|
||||||
|
]),
|
||||||
|
sort: [
|
||||||
|
SortOption(
|
||||||
|
'name',
|
||||||
|
direction: 1,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) => Scaffold(
|
||||||
|
body: RefreshIndicator(
|
||||||
|
onRefresh: _controller.refresh,
|
||||||
|
child: StreamChannelListView(
|
||||||
|
controller: _controller,
|
||||||
|
onChannelTap: (channel) => Navigator.push(
|
||||||
|
context,
|
||||||
|
MaterialPageRoute(
|
||||||
|
builder: (_) => StreamChannel(
|
||||||
|
channel: channel,
|
||||||
|
child: const ChannelPage(),
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
|
||||||
pagination: PaginationParams(
|
|
||||||
limit: 25,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
);
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Customize The User Items
|
### Customize The User Items
|
||||||
|
|
||||||
You can use your own widget for the user items using the `userItemBuilder` parameter.
|
You can use your own widget for the user items using the `itemBuilder` parameter.
|
||||||
|
|
||||||
```dart
|
```dart
|
||||||
UsersListView(
|
StreamUsersListView(
|
||||||
// ...
|
// ...
|
||||||
userItemBuilder: (context, user, isSelected) {
|
itemBuilder: (context, users, index, defaultWidget) {
|
||||||
return Text(user.name);
|
return Text(user[index].name);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
```
|
```
|
||||||
|
|
||||||
### Group Alphabetically
|
|
||||||
|
|
||||||
You can group alphabetically using the `groupAlphabetically` parameter:
|
|
||||||
|
|
||||||
```dart
|
|
||||||
UsersListView(
|
|
||||||
//...
|
|
||||||
groupAlphabetically: true,
|
|
||||||
),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Selecting Users
|
|
||||||
|
|
||||||
The `UserListView` widget allows selecting users in a list by supplying a selected users list and callbacks
|
|
||||||
for when user items are tapped.
|
|
||||||
|
|
||||||
```dart
|
|
||||||
Set<User>? selectedUsers = {};
|
|
||||||
|
|
||||||
UsersListView(
|
|
||||||
//...
|
|
||||||
selectedUsers: selectedUsers,
|
|
||||||
onUserTap: (user, _) {
|
|
||||||
setState(() {
|
|
||||||
selectedUsers.add(user);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
|
||||||
```
|
|
||||||
|
|||||||
Reference in New Issue
Block a user