On this page

Conversation component

The conversation component of the In-app Chat Kit provides the chat list and chat features.

The Conversation component has already integrated the Message component. If you don't need the conversation list, you can directly use the Message component.
  • Chat list: Allow you to view the data of your chat list and support automatic update of the chat list based on chat messages.
  • Chat: Create one-on-one chats and group chats.

Integrate the conversation component into your project


Integrate the In-app Chat Kit SDK into your project (finished the initialization and login are required). For more information, see Quick start.

Add the conversation component

In the file that needs to use the conversation component, use the ZIMKitConversationListView widget.

import 'package:zego_zimkit/zego_zimkit.dart';

// home_page.dart
class ZIMKitDemoHomePage extends StatelessWidget {
  const ZIMKitDemoHomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Conversations'),
          actions: const [HomePagePopupMenuButton()],
        body: ZIMKitConversationListView(
          onPressed: (context, conversation, defaultAction) {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) {
                return ZIMKitMessageListPage(
                  conversationID: conversation.id,
                  conversationType: conversation.type,

Customize features/UI

If the default conversation-relevant features, behaviors or UI don’t fully meet your needs, we allow you to flexibly customize those through the parameters provided by the ZIMKitConversationListView mentioned in this section.

The usage of commonly used parameters is as follows:

Conversastion API

The following methods can be called using ZIMKit() syntax, such as ZIMKit().createGroup().

The following methods can be called using ZIMKit() syntax, such as ZIMKit().getGroupStateChangedEventStream().listen(onGroupStateChangedEvent).




Message component