talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

StreamChannelListView

Browse Source
This commit is contained in:
Salvatore Giordano
2022-04-28 11:15:56 +02:00
parent a3a23feb3e
commit ec6ac99f36
1 changed files with 54 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx
+54 -62
View File
@@ -1,12 +1,12 @@
--- ---
id: channel_list_view id: stream_channel_list_view
sidebar_position: 4 sidebar_position: 4
title: ChannelListView title: StreamChannelListView
--- ---
A Widget For Displaying A List Of Channels 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) ![](../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) 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. 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 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 `ChannelListView` ONLY the channels that the user is a part of. This section goes into setting up and using a `StreamChannelListView`
widget. widget.
### Basic Example ### Basic Example
Here is a basic example of the `ChannelListView` widget. It consists of the main widget itself, a `Filter` 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.
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.
```dart ```dart
class ChannelListPage extends StatelessWidget { class ChannelListPage extends StatefulWidget {
const ChannelListPage({
Key? key,
required this.client,
}) : super(key: key);
final StreamChatClient client;
@override @override
Widget build(BuildContext context) { State<ChannelListPage> createState() => _ChannelListPageState();
return Scaffold( }
body: ChannelsBloc(
child: ChannelListView( class _ChannelListPageState extends State<ChannelListPage> {
filter: Filter.in_('members', [StreamChat.of(context).user.id]), late final _controller = StreamChannelListController(
sort: [SortOption('last_message_at')], client: widget.client,
pagination: PaginationParams( filter: Filter.in_(
limit: 20, 'members',
), [StreamChat.of(context).currentUser!.id],
channelWidget: ChannelPage(), ),
), 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 ### Customizing the Channel Preview
A common aspect of the widget needed to be tweaked according to each app is the Channel Preview (the 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 ```dart
ChannelListView( StreamChannelListView(
... ...
channelPreviewBuilder: (context, channel) { itemBuilder: (context, channels, index, defaultTile) {
return ListTile( return ListTile(
tileColor: Colors.amberAccent, tileColor: Colors.amberAccent,
title: Center( title: Center(
child: ChannelName(), child: StreamChannelName(channel: channels[index]),
), ),
); );
}, },
@@ -73,39 +101,3 @@ ChannelListView(
Which gives you a new Channel preview in the list: Which gives you a new Channel preview in the list:
![](../assets/channel_preview.png) ![](../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
]
),
```