Building A One To One/Group Chat Experience

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.

main.dart

@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

Dart

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"));
            }
          },
        ),
      ),
    );
  }
}

Step 2: Render the Messages Component

Compose the messaging view using:

• Message Header
• Message List
• Message Composer

Dart

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,
            ),
          ],
        ),
      ),
    );
  }
}

---

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 — Personalize the chat UI to align with your brand.
• Message List — Customize message display and behavior.
• Message Composer — Configure rich text, attachments, and audio recording.