StreamChannelHeader

This commit is contained in:
Salvatore Giordano
2022-04-29 09:38:43 +02:00
parent 6c2c60075a
commit 94c4db0c80
@@ -1,12 +1,12 @@
--- ---
id: channel_header id: stream_channel_header
sidebar_position: 10 sidebar_position: 10
title: ChannelHeader title: StreamChannelHeader
--- ---
A Widget To Display Common Channel Details A Widget To Display Common Channel Details
Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/ChannelHeader-class.html) Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChannelHeader-class.html)
![](../assets/channel_header.png) ![](../assets/channel_header.png)
@@ -17,28 +17,28 @@ be in the form of a channel name or the users in the channel. Along with that, t
a way for the user to look at more details of the channel (media, pinned messages, actions, etc.) and 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. 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 `ChannelHeader` To encapsulate all of this functionality into one widget, the Flutter SDK contains a `StreamChannelHeader`
widget which provides these out of the box. widget which provides these out of the box.
### Basic Example ### Basic Example
Let's just add a `ChannelHeader` to a page with a `MessageListView` and a `MessageInput` to display Let's just add a `StreamChannelHeader` to a page with a `StreamMessageListView` and a `StreamMessageInput` to display
and send messages. and send messages.
```dart ```dart
class ChannelPage extends StatelessWidget { class ChannelPage extends StatelessWidget {
const ChannelPage({ const ChannelPage({
Key? key, Key key,
}) : super(key: key); }) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: ChannelHeader(), appBar: StreaChannelHeader(),
body: Column( body: Column(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: MessageListView( child: StreamMessageListView(
threadBuilder: (_, parentMessage) { threadBuilder: (_, parentMessage) {
return ThreadPage( return ThreadPage(
parent: parentMessage, parent: parentMessage,
@@ -46,7 +46,7 @@ class ChannelPage extends StatelessWidget {
}, },
), ),
), ),
MessageInput(), StreamMessageInput(),
], ],
), ),
); );
@@ -62,7 +62,7 @@ Use the `title`, `subtitle`, `leading`, or `actions` parameters to substitute th
```dart ```dart
//... //...
ChannelHeader( StreamChannelHeader(
title: Text('My Custom Name'), title: Text('My Custom Name'),
), ),
``` ```
@@ -71,14 +71,14 @@ ChannelHeader(
### Showing Connection State ### Showing Connection State
The `ChannelHeader` can also display connection state below the tile which shows the user if they The `StreamChannelHeader` can also display connection state below the tile which shows the user if they
are connected or offline, etc. on connection events. are connected or offline, etc. on connection events.
To enable this, use the `showConnectionStateTile` property. To enable this, use the `showConnectionStateTile` property.
```dart ```dart
//... //...
ChannelHeader( StreamChannelHeader(
showConnectionStateTile: true, showConnectionStateTile: true,
), ),
``` ```