StreamChannelListHeader
A Header Widget For A List Of Channels
Find the pub.dev documentation here
#
BackgroundA 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 ExampleThis is a basic example of a page which has a StreamChannelListView
and a StreamChannelListHeader
to recreate a
common Channels Page.
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],
),
sort: 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 HeaderThe header works like a ListTile
widget.
Use the titleBuilder
, subtitle
, leading
, or actions
parameters to substitute the widgets for your own.
//...
StreamChannelListHeader(
subtitle: Text('My Custom Subtitle'),
),
The titleBuilder
param helps you build different titles depending on the connection state:
//...
StreamChannelListHeader(
titleBuilder: (context, status, client) {
switch(status) {
/// Return your title widget
}
},
),
#
Showing Connection StateThe 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.
//...
StreamChannelListHeader(
showConnectionStateTile: true,
),