StreamChannelHeader

A Widget To Display Common Channel Details

Find the pub.dev documentation here

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.

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.

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

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