---
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({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const StreamChannelHeader(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: StreamMessageListView(
              threadBuilder: (_, parentMessage) {
                return ThreadPage(
                  parent: parentMessage,
                );
              },
            ),
          ),
          const 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,
),
```