> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversation List + Message View

> Build a two-panel CometChat Flutter UI Kit layout with a conversation list, active message view, headers, lists, and composer.

<Accordion title="AI Integration Quick Reference">
  | Field         | Value                                                                                                                                                      |
  | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package       | `cometchat_chat_uikit`                                                                                                                                     |
  | Import        | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';`                                                                                         |
  | Purpose       | Build a two-panel CometChat Flutter UI Kit layout with a conversation list, active message view, headers, lists, and composer.                             |
  | Key widgets   | `CometChatUIKit` · `CometChatConversations` · `CometChatMessageComposer` · `CometChatMessageHeader` · `CometChatMessageList` · `CometChatSubscriptionType` |
  | Key methods   | `init()` · `login()`                                                                                                                                       |
  | Prerequisites | `CometChatUIKit` initialised and a user logged in.                                                                                                         |
  | Related       | [Conversations](/ui-kit/flutter/conversations) · [Message List](/ui-kit/flutter/message-list) · [Message Composer](/ui-kit/flutter/message-composer)       |
</Accordion>

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

### Step 2: Create the Chat Screen

Use the same `MessagesScreen` pattern from [One-to-One Chat](/ui-kit/flutter/flutter-one-to-one-chat#step-2-render-the-messages-component):

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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),
              ],
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

### Step 3: Complete Example

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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();
      }
    }
    ```
  </Tab>
</Tabs>