ChannelHeader

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 ChannelHeader widget which provides these out of the box.

Basic Example

Let’s just add a ChannelHeader to a page with a MessageListView and a MessageInput to display and send messages.

class ChannelPage extends StatelessWidget {
  const ChannelPage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChannelHeader(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: MessageListView(
              threadBuilder: (_, parentMessage) {
                return ThreadPage(
                  parent: parentMessage,
                );
              },
            ),
          ),
          MessageInput(),
        ],
      ),
    );
  }
}

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.

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

Showing Connection State

The ChannelHeader 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.

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