Skip to main content
Version: v4

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

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

Did you find this page helpful?