Skip to main content
The Conversation List + Message View layout provides a seamless two-panel chat interface. This layout allows users to switch between conversations while keeping the active chat open.

​
Integration

​
Step 1: Create the Conversations Screen

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

class ConversationsScreen extends StatelessWidget {
  const ConversationsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Conversations')),
      body: CometChatConversations(
        onItemTap: (conversation) {
          _openChat(context, conversation);
        },
      ),
    );
  }

  void _openChat(BuildContext context, Conversation conversation) {
    User? user;
    Group? group;

    if (conversation.conversationType == 'user') {
      user = conversation.conversationWith as User;
    } else {
      group = conversation.conversationWith as Group;
    }

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => ChatScreen(user: user, group: group),
      ),
    );
  }
}

​
Step 2: Create the Chat Screen

Use the same MessagesScreen pattern from One-to-One Chat: 
class ChatScreen extends StatelessWidget {
  final User? user;
  final Group? group;

  const ChatScreen({super.key, this.user, this.group});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CometChatMessageHeader(user: user, group: group),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: CometChatMessageList(user: user, group: group)),
            CometChatMessageComposer(user: user, group: group),
          ],
        ),
      ),
    );
  }
}

​
Step 3: Complete Example

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CometChat V6',
      theme: ThemeData(useMaterial3: true),
      home: const InitPage(),
    );
  }
}

class InitPage extends StatefulWidget {
  const InitPage({super.key});

  @override
  State<InitPage> createState() => _InitPageState();
}

class _InitPageState extends State<InitPage> {
  bool _ready = false;

  @override
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    UIKitSettings settings = (UIKitSettingsBuilder()
          ..subscriptionType = CometChatSubscriptionType.allUsers
          ..autoEstablishSocketConnection = true
          ..region = "REGION"
          ..appId = "APP_ID"
          ..authKey = "AUTH_KEY")
        .build();

    CometChatUIKit.init(
      uiKitSettings: settings,
      onSuccess: (_) {
        CometChatUIKit.login("cometchat-uid-1", onSuccess: (_) {
          setState(() => _ready = true);
        }, onError: (e) {});
      },
      onError: (e) {},
    );
  }

  @override
  Widget build(BuildContext context) {
    if (!_ready) {
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }
    return const ConversationsScreen();
  }
}