Multi Tab Chat UI Guide - CometChat Docs

Next Steps

Quick Reference for AI Agents & Developers

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

// Create tab-based UI
DefaultTabController(
  length: 3,
  child: Scaffold(
    body: TabBarView(
      children: [
        CometChatConversations(),
        CometChatUsers(),
        CometChatGroups(),
      ],
    ),
  ),
)

Components Used: Conversations | Users | Groups

This guide will help you create a multi-tab chat user interface using the cometchat_chat_uikit package in Flutter. The final UI will consist of three tabs: Conversations, Users, and Groups.

Android (Overview)
Android (Conversations)
Android (Users)
Android (Groups)

iOS (Overview)
iOS (Conversations)
iOS (Users)
iOS (Groups)

Create the Multi-Tab Chat UI:

Update your lib/multi_tab_chat_ui_guid.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> {

  @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: const TabBarView(
          children: [
            CometChatConversationsWithMessages(
                conversationsConfiguration: ConversationsConfiguration(
                    hideAppbar: true
                )
            ),
            CometChatUsersWithMessages(
                usersConfiguration: UsersConfiguration(
                    hideAppbar: true,
                    hideSearch: true
                )
            ),
            CometChatGroupsWithMessages(
                groupsConfiguration: GroupsConfiguration(
                    hideAppbar: true,
                    hideSearch: true
                )
            ),
          ],
        ),
      ),
    );
  }
}

Next Steps

Conversations

Display and manage conversation lists

Users

Browse and select users

Groups

Manage group conversations

Getting Started

Set up and initialize the UI Kit

⌘I