diff --git a/docusaurus/docs/Flutter/assets/channel_preview.png b/docusaurus/docs/Flutter/assets/channel_preview.png new file mode 100644 index 00000000..39f5629b Binary files /dev/null and b/docusaurus/docs/Flutter/assets/channel_preview.png differ 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 a88c617d..e72bba0f 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx @@ -4,10 +4,26 @@ sidebar_position: 4 title: ChannelListView --- -![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_list_view.png) -![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_list_view_paint.png) +A Widget For Displaying A List Of Channels -It shows the list of current channels. +Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelListView-class.html) + +### Background + +Channels are fundamental elements of Stream Chat and constitute shared spaces which allow users to +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 that is part of +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` +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. ```dart class ChannelListPage extends StatelessWidget { @@ -27,11 +43,29 @@ class ChannelListPage extends StatelessWidget { } ``` +This example by default displays the channels that a user is a part of. Now let's look at customizing +the widget. -Make sure to have a [StreamChat] ancestor in order to provide the -information about the channels. -The widget uses a [ListView.custom] to render the list of channels. +#### 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: + +```dart +ChannelListView( + ... + channelPreviewBuilder: (context, channel) { + return ListTile( + tileColor: Colors.amberAccent, + title: Center( + child: ChannelName(), + ), + ); + }, +), +``` + +Which gives you a new Channel preview in the list: + +![](../assets/channel_preview.png) -The widget components render the ui based on the first ancestor of -type [StreamChatTheme]. -Modify it to change the widget appearance. \ No newline at end of file diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx index d143e9fd..952c9460 100644 --- a/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx +++ b/docusaurus/docs/Flutter/stream_chat_flutter/introduction.mdx @@ -4,3 +4,10 @@ sidebar_position: 1 title: Introduction --- +Understanding The UI Package Of The Flutter SDK + +The official Flutter components for Stream Chat, a service for building chat applications. + +While the Stream Chat service provides the backend for messaging and the LLC provides an easy way to +use it in your Flutter apps, we wanted to make sure that adding Chat functionality to your app was as quick as possible. +