StreamChannelHeader

StreamChannelHeader is an app bar widget for individual channel screens. It shows the channel name, member count, and connection status, and provides a back button and a tap target for opening channel details. See the pub.dev documentation for the full API reference.

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 StreamMessageComposer to display and send messages.

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 StreamMessageComposer(),
        ],
      ),
    );
  }
}

Customizing Parts Of The Header

The header works like a ListTile widget.

Use the title, subtitle, leading, or trailing parameters to substitute the widgets for your own.

//...
StreamChannelHeader(
    title: Text('My Custom Title'),
),

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.

//...
StreamChannelHeader(
    showConnectionStateTile: true,
),

Per-Instance Style Overrides

Use the style parameter to override colors, typography, or spacing for a single header instance without changing the global theme:

StreamChannelHeader(
  style: StreamAppBarStyle(
    backgroundColor: Colors.white,
    titleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
  ),
),

StreamAppBarStyle accepts backgroundColor, padding, spacing, titleTextStyle, subtitleTextStyle, leadingStyle, and trailingStyle. It merges over the ambient StreamAppBarTheme, so you only need to set what you want to override.

Theming

The header uses StreamAppBarThemeData for global styling. Customize it by passing it to StreamChatThemeData.channelHeaderTheme:

StreamChat(
  client: client,
  themeData: StreamChatThemeData(
    channelHeaderTheme: StreamAppBarThemeData(
      style: StreamAppBarStyle(
        backgroundColor: Colors.white,
        titleTextStyle: const TextStyle(fontWeight: FontWeight.bold),
        subtitleTextStyle: const TextStyle(color: Colors.grey),
      ),
    ),
  ),
  child: MyApp(),
)

Or use StreamAppBarTheme to override for a subtree:

StreamAppBarTheme(
  data: StreamAppBarThemeData(
    style: StreamAppBarStyle(titleTextStyle: const TextStyle(fontSize: 18)),
  ),
  child: const StreamChannelHeader(),
)

Channel

StreamMessageListView