Multi Tab Chat UI Guide

This guide helps you create a multi-tab chat user interface using the CometChat V6 UIKit in Flutter. The final UI consists of three tabs: Conversations, Users, and Groups.

Create the Multi-Tab Chat UI:

Update your lib/multi_tab_chat_ui.dart file with the following code:

Dart

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

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

  @override
  State<MultiTabUIGuideExample> createState() => _MultiTabUIGuideExampleState();
}

class _MultiTabUIGuideExampleState extends State<MultiTabUIGuideExample> {

  void _navigateToMessages(BuildContext context, {User? user, Group? group}) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          appBar: CometChatMessageHeader(
            user: user,
            group: group,
          ),
          body: SafeArea(
            child: Column(
              children: [
                Expanded(
                  child: CometChatMessageList(
                    user: user,
                    group: group,
                  ),
                ),
                CometChatMessageComposer(
                  user: user,
                  group: group,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Multi Tab UI Guide'),
          backgroundColor: Colors.white,
          leading: null,
          automaticallyImplyLeading: false,
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.chat), text: 'Conversation'),
              Tab(icon: Icon(Icons.person), text: 'Users'),
              Tab(icon: Icon(Icons.group), text: 'Groups'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            CometChatConversations(
              hideAppbar: true,
              onItemTap: (conversation) {
                _navigateToMessages(
                  context,
                  user: conversation.conversationWith is User
                      ? conversation.conversationWith as User
                      : null,
                  group: conversation.conversationWith is Group
                      ? conversation.conversationWith as Group
                      : null,
                );
              },
            ),
            CometChatUsers(
              hideAppbar: true,
              hideSearch: true,
              onItemTap: (user) {
                _navigateToMessages(context, user: user);
              },
            ),
            CometChatGroups(
              hideAppbar: true,
              hideSearch: true,
              onItemTap: (group) {
                _navigateToMessages(context, group: group);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Key V6 Differences

Aspect	V5	V6
Composite widgets	CometChatConversationsWithMessages, CometChatUsersWithMessages, CometChatGroupsWithMessages	Not available — compose manually
Navigation to messages	Handled internally by composite widgets	You handle navigation and compose MessageHeader + MessageList + MessageComposer
State management	GetX	BLoC