From 2363a6aca16d768afcdc1a299d1a00c579e75121 Mon Sep 17 00:00:00 2001
From: Deven Joshi <deven9852@gmail.com>
Date: Tue, 6 Jul 2021 14:22:24 +0530
Subject: [PATCH] fix: added new docs

---
 .../channel_list_header.mdx                   | 79 ++++++++++++++++++-
 .../stream_chat_flutter/channel_list_view.mdx | 14 ++--
 2 files changed, 86 insertions(+), 7 deletions(-)

diff --git a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx
index af581c42..a3e3bd1d 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_header.mdx
@@ -2,4 +2,81 @@
 id: channel_list_header
 sidebar_position: 9
 title: ChannelListHeader
----
\ No newline at end of file
+---
+
+A Header Widget For A List Of Channels
+
+### Background
+
+A common pattern for most messaging apps is to show a list of Channels (chats) on the first screen
+and navigate to an individual one on being clicked. On this first page where the list of channels are
+displayed, it is usual to have functionality such as adding a new chat, display the user logged in, etc.
+
+To encapsulate all of this functionality into one widget, the Flutter SDK contains a `ChannelListHeader`
+widget which provides these out of the box.
+
+### Basic Example
+
+This is a basic example of a page which has a `ChannelListView` and a `ChannelListHeader` to recreate a
+common Channels Page.
+
+```dart
+class DemoPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: ChannelListHeader(),
+      body: ChannelsBloc(
+         child: ChannelListView(
+           filter: Filter.in_('members', [StreamChat.of(context).user.id]),
+           sort: [SortOption('last_message_at')],
+           pagination: PaginationParams(
+             limit: 20,
+           ),
+           channelWidget: ChannelPage(),
+         ),
+      ),
+    );
+  }
+}
+```
+
+### Customizing Parts Of The Header
+
+The header works like a `ListTile` widget.
+
+Use the `titleBuilder`, `subtitle`, `leading`, or `actions` parameters to substitute the widgets for your own.
+
+```dart
+//...
+ChannelListHeader(
+    subtitle: Text('My Custom Subtitle'),
+),
+```
+
+The `titleBuilder` param helps you build different titles depending on the connection state:
+
+```dart
+//...
+ChannelListHeader(
+    titleBuilder: (context, status, client) {
+        switch(status) {
+            /// Return your title widget
+        }
+    },
+),
+```
+
+### Showing Connection State
+
+The `ChannelListHeader` can also display connection state below the tile which shows the user if they
+are connected or offline, etc. on connection events.
+
+To enable this, use the `showConnectionStateTile` property.
+
+```dart
+//...
+ChannelListHeader(
+    showConnectionStateTile: true,
+),
+```
\ No newline at end of file
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 f513d00a..2faeb4c4 100644
--- a/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx
+++ b/docusaurus/docs/Flutter/stream_chat_flutter/channel_list_view.mdx
@@ -30,13 +30,15 @@ class ChannelListPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: ChannelListView(
-        filter: Filter.in_('members', [StreamChat.of(context).user.id]),
-        sort: [SortOption('last_message_at')],
-        pagination: PaginationParams(
-          limit: 20,
+      body: ChannelsBloc(
+        child: ChannelListView(
+          filter: Filter.in_('members', [StreamChat.of(context).user.id]),
+          sort: [SortOption('last_message_at')],
+          pagination: PaginationParams(
+            limit: 20,
+          ),
+          channelWidget: ChannelPage(),
         ),
-        channelWidget: ChannelPage(),
       ),
     );
   }