# StreamChannelListHeader

A Header Widget For A List Of Channels

Find the pub.dev documentation [here](https://pub.dev/documentation/stream_chat_flutter/latest/stream_chat_flutter/StreamChannelListHeader-class.html)

![](@chat-sdk/flutter/v4/_assets/channel_list_header.png)

### Background

A common pattern for most messaging apps is to show a list of Channels (chats) on the first screen
and navigate to an individual one on being clicked. On this first page where the list of channels are
displayed, it is usual to have functionality such as adding a new chat, display the user logged in, etc.

To encapsulate all of this functionality into one widget, the Flutter SDK contains a `StreamChannelListHeader`
widget which provides these out of the box.

### Basic Example

This is a basic example of a page which has a `StreamChannelListView` and a `StreamChannelListHeader` to recreate a
common Channels Page.

```dart
class ChannelListPage extends StatefulWidget {
  const ChannelListPage({
    Key? key,
    required this.client,
  }) : super(key: key);

  final StreamChatClient client;

  @override
  State<ChannelListPage> createState() => _ChannelListPageState();
}

class _ChannelListPageState extends State<ChannelListPage> {
  late final _controller = StreamChannelListController(
    client: widget.client,
    filter: Filter.in_(
      'members',
      [StreamChat.of(context).currentUser!.id],
    ),
    channelStateSort: const [SortOption('last_message_at')],
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: StreamChannelListHeader(),
        body: RefreshIndicator(
          onRefresh: _controller.refresh,
          child: StreamChannelListView(
            controller: _controller,
            onChannelTap: (channel) => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => StreamChannel(
                  channel: channel,
                  child: const ChannelPage(),
                ),
              ),
            ),
          ),
        ),
      );
}
```

### Customizing Parts Of The Header

The header works like a `ListTile` widget.

Use the `titleBuilder`, `subtitle`, `leading`, or `actions` parameters to substitute the widgets for your own.

```dart
//...
StreamChannelListHeader(
    subtitle: Text('My Custom Subtitle'),
),
```

![](@chat-sdk/flutter/v4/_assets/channel_list_header_custom_subtitle.png)

The `titleBuilder` parameter helps you build different titles depending on the connection state:

```dart
//...
StreamChannelListHeader(
    titleBuilder: (context, status, client) {
        switch(status) {
            /// Return your title widget
        }
    },
),
```

### Showing Connection State

The `StreamChannelListHeader` 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
//...
StreamChannelListHeader(
    showConnectionStateTile: true,
),
```

---

This page was last updated at 2025-08-15T14:15:48.938Z.

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