StreamChannelHeader

docusaurus/docs/Flutter/stream_chat_flutter/stream_channel_header.mdx

@@ -0,0 +1,84 @@
+---
+id: stream_channel_header
+sidebar_position: 10
+title: StreamChannelHeader
+---
+
+A Widget To Display Common Channel Details
+
+Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChannelHeader-class.html)
+
+![](../assets/channel_header.png)
+
+### Background
+
+When a user opens a channel, it is helpful to provide context of which channel they are in. This may
+be in the form of a channel name or the users in the channel. Along with that, there also needs to be
+a way for the user to look at more details of the channel (media, pinned messages, actions, etc.) and
+preferably also a way to navigate back to where they came from.
+
+To encapsulate all of this functionality into one widget, the Flutter SDK contains a `StreamChannelHeader`
+widget which provides these out of the box.
+
+### Basic Example
+
+Let's just add a `StreamChannelHeader` to a page with a `StreamMessageListView` and a `StreamMessageInput` to display
+and send messages.
+
+```dart
+class ChannelPage extends StatelessWidget {
+  const ChannelPage({
+    Key key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: StreaChannelHeader(),
+      body: Column(
+        children: <Widget>[
+          Expanded(
+            child: StreamMessageListView(
+              threadBuilder: (_, parentMessage) {
+                return ThreadPage(
+                  parent: parentMessage,
+                );
+              },
+            ),
+          ),
+          StreamMessageInput(),
+        ],
+      ),
+    );
+  }
+}
+```
+
+### Customizing Parts Of The Header
+
+The header works like a `ListTile` widget.
+
+Use the `title`, `subtitle`, `leading`, or `actions` parameters to substitute the widgets for your own.
+
+```dart
+//...
+StreamChannelHeader(
+    title: Text('My Custom Name'),
+),
+```
+
+![](../assets/channel_header_custom_title.png)
+
+### Showing Connection State
+
+The `StreamChannelHeader` 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
+//...
+StreamChannelHeader(
+    showConnectionStateTile: true,
+),
+```