diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx index eb7baf20..f0835d23 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx +++ b/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 createState() => _ChannelListPageState(); +} + +class _ChannelListPageState extends State { + 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 - ] -), -``` -