Skip to main content

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.

FieldValue
Packagecometchat_chat_uikit
FrameworkFlutter
ComponentsCometChatConversations, CometChatCallLogs, CometChatUsers, CometChatGroups, CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
LayoutBottom navigation tabs (Chats, Calls, Users, Groups) + message view
PrerequisiteComplete Getting Started Steps 1–4 first
PatternFull-featured messaging app with multiple sections
This guide builds a tabbed messaging UI — Chats, Calls, Users, and Groups tabs with bottom navigation. Good for full-featured apps that need more than just conversations. This assumes you’ve already completed Getting Started (project created, UI Kit installed, init + login working).
View Sample App on GitHub

​
What You’re Building

Three sections working together:
  1. Bottom navigation — switches between Chats, Calls, Users, and Groups
  2. Page view — renders the list for the active tab
  3. Message view — header + messages + composer for the selected item

​
Step 1 — Create the Tabs Screen

The tabs screen uses BottomNavigationBar and PageView to create a tabbed interface.
lib/tabs_screen.dart
import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
import 'messages_screen.dart';

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

  @override
  State<TabsScreen> createState() => _TabsScreenState();
}

class _TabsScreenState extends State<TabsScreen> {
  int _selectedIndex = 0;
  final PageController _pageController = PageController();

  void _onItemTapped(int index) {
    setState(() => _selectedIndex = index);
    _pageController.jumpToPage(index);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) => setState(() => _selectedIndex = index),
        children: [
          CometChatConversations(
            onItemTap: (conversation) {
              final target = conversation.conversationWith;
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => MessagesScreen(
                    user: target is User ? target : null,
                    group: target is Group ? target : null,
                  ),
                ),
              );
            },
          ),
          CometChatCallLogs(),
          CometChatUsers(
            onItemTap: (user) => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => MessagesScreen(user: user)),
            ),
          ),
          CometChatGroups(
            onItemTap: (group) => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => MessagesScreen(group: group)),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        selectedItemColor: Colors.deepPurple,
        unselectedItemColor: Colors.grey,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
          BottomNavigationBarItem(icon: Icon(Icons.call), label: "Calls"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "Users"),
          BottomNavigationBarItem(icon: Icon(Icons.group), label: "Groups"),
        ],
      ),
    );
  }
}
Key points:
  • PageView enables swipeable pages for each tab.
  • BottomNavigationBar provides quick access to different sections.
  • Each list component navigates to MessagesScreen on item tap.

​
Step 2 — Create the Messages Screen

Same as the Conversation + Message guide:
lib/messages_screen.dart
import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

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

  const MessagesScreen({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),
          ],
        ),
      ),
    );
  }
}

​
Step 3 — Run the App

flutter run
You should see the tab bar at the bottom. Switch between Chats, Calls, Users, and Groups — tapping any item opens the message view.

​
Tab Descriptions

TabComponentPurpose
ChatsCometChatConversationsRecent conversations with unread counts
CallsCometChatCallLogsCall history (audio/video)
UsersCometChatUsersBrowse and search all users
GroupsCometChatGroupsBrowse and join groups

​
Next Steps

Conversations

Customize the conversation list

Call Logs

Configure call history

Users & Groups

Manage user and group lists

Theming

Customize colors and styles