fix: added new docs
This commit is contained in:
@@ -2,4 +2,77 @@
|
||||
id: channel_header
|
||||
sidebar_position: 10
|
||||
title: ChannelHeader
|
||||
---
|
||||
---
|
||||
|
||||
A Widget To Display Common Channel Details
|
||||
|
||||
### 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 `ChannelHeader`
|
||||
widget which provides these out of the box.
|
||||
|
||||
### Basic Example
|
||||
|
||||
Let's just add a `ChannelHeader` to a page with a `MessageListView` and a `MessageInput` 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: ChannelHeader(),
|
||||
body: Column(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: MessageListView(
|
||||
threadBuilder: (_, parentMessage) {
|
||||
return ThreadPage(
|
||||
parent: parentMessage,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
MessageInput(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 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
|
||||
//...
|
||||
ChannelHeader(
|
||||
title: Text('My Custom Name'),
|
||||
),
|
||||
```
|
||||
|
||||
### Showing Connection State
|
||||
|
||||
The `ChannelHeader` 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
|
||||
//...
|
||||
ChannelHeader(
|
||||
showConnectionStateTile: true,
|
||||
),
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user