Multiple Conversations Confused about something? Let us know how we can improve: Submit

Most chat applications handle more than just one single conversation. Apps like Facebook Messenger, Whatsapp and Telegram allows you to have multiple one to one and group conversations.

Let’s find out how we can change our application chat screen to display the list of conversations and navigate between them.

Note: the SDK uses Flutter’s Navigator to move from one route to another, this allows us to avoid any boiler-plate code. Of course you can take total control of how navigation works by customizing widgets like Channel and ChannelList.

Let’s open again main.dart and make some small changes:

import 'package:flutter/material.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; void main() async { final client = Client( 'b67pax5b2wdq', logLevel: Level.INFO, ); await client.setUser( User( id: 'polished-firefly-8', extraData: { 'image': 'https://getstream.io/random_png/?id=polished-firefly-8&name=Polished+firefly', }, ), 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoicG9saXNoZWQtZmlyZWZseS04In0.jlR-RdQ2d-OBiUQ5xXHfA05wH4QPGBHSH_lxpapzlJo', ); - final channel = client.channel('messaging', id: 'godevs'); - // ignore: unawaited_futures - channel.watch(); - runApp(MyApp(client, channel)); + runApp(MyApp(client)); } class MyApp extends StatelessWidget { final Client client; - final Channel channel; - MyApp(this.client, this.channel); + MyApp(this.client); @override Widget build(BuildContext context) { return MaterialApp( - home: StreamChat( - client: client, - child: StreamChannel( - channel: channel, - child: ChannelPage(), - ), - ), + builder: (context, child) => StreamChat( + client: client, + child: child, + ), + home: ChannelListPage(), ); } } + class ChannelListPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + body: ChannelsBloc( + child: ChannelListView( + filter: { + 'members': { + '\$in': [StreamChat.of(context).user.id], + } + }, + sort: [SortOption('last_message_at')], + pagination: PaginationParams( + limit: 20, + ), + channelWidget: ChannelPage(), + ), + ), + ); + } + } 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(), ), MessageInput(), ], ), ); } }

If you run your application now, you will see that the first screen shows a list of conversations, you can open each by tapping and go back to the list.

Every single widget involved in this UI can be customized or swapped with your own.

The ChannelListPage widget retrieves the list of channels based on a custom query and ordering using the ChannelsBloc inherited widget. In this case we are showing the list of channels the current user is a member and we order them based on the time they had a new message. ChannelListView handles pagination and updates automatically out of the box when new channels are created or when a new message is added to a channel.

Use our example app on Codepen to interact with your Flutter app and see how the ChannelListPage handles new messages: