This is documentation for Stream Chat Flutter SDK v4, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v8).

StreamChannelGridView

A Widget For Displaying A List Of Channels

Find the pub.dev documentation here

Background

The StreamChannelGridView widget allows displaying a list of channels to a user in a GridView.

Make sure to check the StreamChannelListView documentation to know how to show results in a ListView.

Here is a basic example of the StreamChannelGridView widget. It consists of the main widget itself, a StreamChannelListController to control the list of channels and a callback to handle the tap of a channel.

class ChannelGridPage extends StatefulWidget {
  const ChannelGridPage({
    Key? key,
    required this.client,
  }) : super(key: key);

  final StreamChatClient client;

  @override
  State<ChannelGridPage> createState() => _ChannelGridPageState();
}

class _ChannelGridPageState extends State<ChannelGridPage> {
  late final _controller = StreamChannelListController(
    client: widget.client,
    filter: Filter.in_(
      'members',
      [StreamChat.of(context).currentUser!.id],
    ),
    channelStateSort: const [SortOption('last_message_at')],
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: RefreshIndicator(
          onRefresh: _controller.refresh,
          child: StreamChannelGridView(
            controller: _controller,
            onChannelTap: (channel) => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => StreamChannel(
                  channel: channel,
                  child: const ChannelPage(),
                ),
              ),
            ),
          ),
        ),
      );
}

This example by default displays the channels that a user is a part of. Now let’s look at customizing the widget.

Setup

StreamChannelHeader

StreamChannelGridView

Background

Basic Example