> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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.

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>