StreamChannelListView

docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx

@@ -1,12 +1,12 @@
 ---
-id: channel_list_view
+id: stream_channel_list_view
 sidebar_position: 4
-title: ChannelListView
+title: StreamChannelListView
 ---
 
 A Widget For Displaying A List Of Channels
 
-Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelListView-class.html)
+Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChannelListView-class.html)
 
 ![](../assets/channel_list_view.png)
 
@@ -18,33 +18,61 @@ message each other.
 1:1 conversations and groups are both examples of channels, albeit with some (distinct/non-distinct)
 differences. Displaying the list of channels that a user is a part of is a pattern present in most messaging apps.
 
-The `ChannelListView` widget allows displaying a list of channels to a user. By default, this is NOT
-ONLY the channels that the user is a part of. This section goes into setting up and using a `ChannelListView`
+The `StreamChannelListView` widget allows displaying a list of channels to a user. By default, this is NOT
+ONLY the channels that the user is a part of. This section goes into setting up and using a `StreamChannelListView`
 widget.
 
 ### Basic Example
 
-Here is a basic example of the `ChannelListView` widget. It consists of the main widget itself, a `Filter`
-to filter only the channels that the user is a part of, sorting by last message time, pagination params,
-and the widget to use when a particular channel is clicked.
+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.
 
 ```dart
-class ChannelListPage extends StatelessWidget {
+class ChannelListPage extends StatefulWidget {
+  const ChannelListPage({
+    Key? key,
+    required this.client,
+  }) : super(key: key);
+
+  final StreamChatClient client;
+
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: ChannelsBloc(
-        child: ChannelListView(
-          filter: Filter.in_('members', [StreamChat.of(context).user.id]),
-          sort: [SortOption('last_message_at')],
-          pagination: PaginationParams(
-            limit: 20,
-          ),
-          channelWidget: ChannelPage(),
-        ),
-      ),
-    );
+  State<ChannelListPage> createState() => _ChannelListPageState();
+}
+
+class _ChannelListPageState extends State<ChannelListPage> {
+  late final _controller = StreamChannelListController(
+    client: widget.client,
+    filter: Filter.in_(
+      'members',
+      [StreamChat.of(context).currentUser!.id],
+    ),
+    sort: const [SortOption('last_message_at')],
+  );
+
+  @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(),
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
 }
 ```
 
@@ -54,16 +82,16 @@ the widget.
 ### Customizing the Channel Preview
 
 A common aspect of the widget needed to be tweaked according to each app is the Channel Preview (the
-Channel tile in the list). To do this, we use the `channelPreviewBuilder` param like this:
+Channel tile in the list). To do this, we use the `itemBuilder` parameter like this:
 
 ```dart
-ChannelListView(
+StreamChannelListView(
   ...
-  channelPreviewBuilder: (context, channel) {
+  itemBuilder: (context, channels, index, defaultTile) {
     return ListTile(
       tileColor: Colors.amberAccent,
       title: Center(
-        child: ChannelName(),
+        child: StreamChannelName(channel: channels[index]),
       ),
     );
   },
@@ -73,39 +101,3 @@ ChannelListView(
 Which gives you a new Channel preview in the list:
 
 ![](../assets/channel_preview.png)
-
-### Adding Swipe Actions
-
-To add actions (such as delete, more info, etc) when Channel preview is swiped left, set the `swipeToAction`
-parameter to `true`.
-
-```dart
-ChannelListView(
-  ...
-  swipeToAction: true,
-),
-```
-
-This adds two basic actions - info and delete:
-
-![](../assets/swipe_channel.png)
-
-To add custom actions of your own, use the `swipeActions` param:
-
-```dart
-ChannelListView(
-  ...
-  swipeToAction: true,
-  swipeActions: [
-    SwipeAction(
-        color: Colors.blue,
-        iconWidget: Icon(Icons.add),
-        onTap: (channel) {
-            // Things to do on icon tap
-        },
-    ),
-    // Other actions here
-  ]
-),
-```
-