From 643a62eefd95a31ba4934262536fe33826f9e239 Mon Sep 17 00:00:00 2001
From: Deven Joshi <deven9852@gmail.com>
Date: Tue, 6 Jul 2021 15:33:30 +0530
Subject: [PATCH] feat: added new docs

---
 .../stream_chat_flutter/user_list_view.mdx    | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
index 489cc141..e9891018 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/user_list_view.mdx
@@ -4,3 +4,85 @@ sidebar_position: 7
 title: UserListView
 ---
 
+A Widget For Displaying And Selecting Users
+
+### Background
+
+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
+of users along with multiple display configurations like a list and grid.
+
+### Basic Example
+
+Let's take a look at an example where we use the widget to autocomplete user names:
+
+```dart
+class UsersListPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: UsersBloc(
+        child: UsersListView(
+          filter: Filter.and([
+            Filter.autoComplete('name', 'search_here'),
+            Filter.notEqual(
+                'id', StreamChat.of(context).user!.id),
+          ]),
+          sort: [
+            SortOption(
+              'name',
+              direction: 1,
+            ),
+          ],
+          pagination: PaginationParams(
+            limit: 25,
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+
+### Customize The User Items
+
+You can use your own widget for the user items using the `userItemBuilder` parameter.
+
+```dart
+UsersListView(
+  // ...
+  userItemBuilder: (context, user, isSelected) {
+    return Text(user.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 and callbacks
+for when user items are tapped.
+
+```dart
+Set<User>? selectedUsers = {};
+
+UsersListView(
+    //...
+    selectedUsers: selectedUsers,
+    onUserTap: (user, _) {
+        setState(() {
+            selectedUsers.add(user);
+        });
+    },
+),
+```