> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Building A One To One/Group Chat Experience

> Build one-to-one and group chat screens in CometChat Flutter UI Kit with message headers, message lists, composers, and user lookup.

The One-to-One Chat feature provides a streamlined direct messaging interface, ideal for support chats, dating apps, and private messaging platforms.

***

### Step 1: Render the Message View

Fetch the target user and display the messaging screen. V6 uses the same `CometChatUIKit` initialization but with BLoC-powered widgets.

```dart main.dart theme={null}
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: FutureBuilder<User>(
        future: fetchCometChatUser("cometchat-uid-2"),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text("Error: ${snapshot.error}"));
          } else if (snapshot.hasData) {
            return MessagesScreen(user: snapshot.data!);
          } else {
            return const Center(child: Text("User not found"));
          }
        },
      ),
    ),
  );
}
```

#### Full Example: main.dart

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'messages_screen.dart';
    import 'cometchat_config.dart';
    import 'dart:async';

    void main() => runApp(const MyApp());

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

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'CometChat V6 UI Kit',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const Home(),
        );
      }
    }

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

      Future<void> _initializeAndLogin() async {
        final settings = UIKitSettingsBuilder()
          ..subscriptionType = CometChatSubscriptionType.allUsers
          ..autoEstablishSocketConnection = true
          ..appId = CometChatConfig.appId
          ..region = CometChatConfig.region
          ..authKey = CometChatConfig.authKey;

        await CometChatUIKit.init(uiKitSettings: settings.build());
        await CometChatUIKit.login(
          'cometchat-uid-1',
          onSuccess: (_) => debugPrint('Login Successful'),
          onError: (err) => throw Exception('Login Failed: $err'),
        );
      }

      @override
      Widget build(BuildContext context) {
        return FutureBuilder<void>(
          future: _initializeAndLogin(),
          builder: (ctx, snap) {
            if (snap.connectionState != ConnectionState.done) {
              return const Scaffold(
                body: SafeArea(child: Center(child: CircularProgressIndicator())),
              );
            }
            if (snap.hasError) {
              return Scaffold(
                body: SafeArea(
                  child: Center(child: Text('Error:\n${snap.error}', textAlign: TextAlign.center)),
                ),
              );
            }
            return const MessagesPage();
          },
        );
      }
    }

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

      Future<User> fetchCometChatUser(String uid) async {
        final completer = Completer<User>();
        CometChat.getUser(
          uid,
          onSuccess: (user) => completer.complete(user),
          onError: (error) => completer.completeError(error),
        );
        return completer.future;
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: FutureBuilder<User>(
              future: fetchCometChatUser("cometchat-uid-2"),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(child: CircularProgressIndicator());
                } else if (snapshot.hasError) {
                  return Center(child: Text("Error: ${snapshot.error}"));
                } else if (snapshot.hasData) {
                  return MessagesScreen(user: snapshot.data!);
                } else {
                  return const Center(child: Text("User not found"));
                }
              },
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

### Step 2: Render the Messages Component

Compose the messaging view using:

* [Message Header](/ui-kit/flutter/message-header)
* [Message List](/ui-kit/flutter/message-list)
* [Message Composer](/ui-kit/flutter/message-composer)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

    class MessagesScreen extends StatefulWidget {
      final User? user;
      final Group? group;

      const MessagesScreen({Key? key, this.user, this.group}) : super(key: key);

      @override
      State<MessagesScreen> createState() => _MessagesScreenState();
    }

    class _MessagesScreenState extends State<MessagesScreen> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: CometChatMessageHeader(
            user: widget.user,
            group: widget.group,
          ),
          body: SafeArea(
            child: Column(
              children: [
                Expanded(
                  child: CometChatMessageList(
                    user: widget.user,
                    group: widget.group,
                  ),
                ),
                CometChatMessageComposer(
                  user: widget.user,
                  group: widget.group,
                ),
              ],
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Step 3: Run the App

```
flutter run
```

This launches the app with the one-to-one chat interface featuring the message header, list, and composer.

***

## Key V6 Differences

| Aspect           | V5                                                    | V6                                                      |
| ---------------- | ----------------------------------------------------- | ------------------------------------------------------- |
| Composite widget | `CometChatMessages` wraps header + list + composer    | No composite — compose individually                     |
| State management | GetX controllers                                      | BLoC pattern (`MessageListBloc`, `MessageComposerBloc`) |
| Extensions       | `CometChatUIKitChatExtensions.getDefaultExtensions()` | Extensions handled via `MessageTemplateUtils`           |
| Rich text        | Not available                                         | Built-in rich text formatting and code blocks           |

***

## Next Steps

* [Advanced Customizations](/ui-kit/flutter/theme-introduction) — Personalize the chat UI to align with your brand.
* [Message List](/ui-kit/flutter/message-list) — Customize message display and behavior.
* [Message Composer](/ui-kit/flutter/message-composer) — Configure rich text, attachments, and audio recording.