# 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)

![](@chat-sdk/flutter/v10-latest/_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'),
),
```

![](@chat-sdk/flutter/v10-latest/_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,
),
```

### Elevation

By default, the header has no shadow (`elevation: 0`). To add a shadow:

```dart
StreamChannelHeader(
  elevation: 1,
  scrolledUnderElevation: 1, // elevation when content scrolls under the header
),
```

### Title Alignment

The title is centered by default (`centerTitle: true`). To left-align the title:

```dart
StreamChannelHeader(
  centerTitle: false,
),
```

### Theming

The header uses `StreamChannelHeaderThemeData` for styling. Customize it globally via:

```dart
StreamChatTheme(
  data: StreamChatThemeData(
    channelHeaderTheme: StreamChannelHeaderThemeData(
      titleStyle: TextStyle(fontWeight: FontWeight.bold),
      subtitleStyle: TextStyle(color: Colors.grey),
      color: Colors.white,
    ),
  ),
  child: ...,
)
```

Or override for a subtree:

```dart
StreamChannelHeaderTheme(
  data: StreamChannelHeaderThemeData(
    titleStyle: TextStyle(fontSize: 18),
  ),
  child: StreamChannelHeader(),
)
```


---

This page was last updated at 2026-04-23T18:43:03.959Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/flutter/v10/stream_chat_flutter/stream_channel_header/](https://getstream.io/chat/docs/sdk/flutter/v10/stream_chat_flutter/stream_channel_header/).