Skip to main content
Learn how to integrate and customize CometChat’s CometChatCallLogs and CometChatCallLogDetails components to display call history and detailed call information in your Flutter chat app.

​
Overview

  • This feature provides a dedicated Calls tab where users can view a list of recent audio and video calls and inspect detailed information for each call.
  • Enables users to review communication history, redial, or manage past calls directly within the app.
  • Users access comprehensive call logs and individual call details via intuitive UI components.

​
Prerequisites

  • A Flutter project with CometChat UIKit Flutter v5 installed
  • CometChat credentials (appID, region, authKey) initialized
  • Call functionality enabled in your CometChat app dashboard
  • Required permissions for microphone and camera in your app
  • Navigation setup for tabs and detail screens

​
Components

ComponentRole
CometChatCallLogsDisplays the list of recent calls with tap callbacks
CometChatCallLogDetailsShows detailed information (participants, duration, type)
dashboard.dartContains the Calls tab integration in the main UI
call_log_details/cometchat_call_log_details.dartImplements the details screen UI

​
Integration Steps

​
Add Calls Tab to Main UI

Integrate the Calls tab into your main dashboard. 
// In sample_app/lib/dashboard.dart, update your PageView or BottomNavigation
_pageController.selectedIndex == 2
  ? CometChatCallLogs(
      onItemClick: (callLog) {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => CometChatCallLogDetails(callLog: callLog),
          ),
        );
      },
    )
  : SizedBox.shrink(),
File reference:
sample_app/lib/dashboard.dart

​
Display Call Logs

Use CometChatCallLogs to fetch and show recent calls. 
CometChatCallLogs(
  onItemClick: (callLog) {
    // Navigates to details screen
  },
);
File reference:
sample_app/lib/dashboard.dart

​
Show Call Log Details

Present detailed information when a call log is tapped. 
CometChatCallLogDetails(
  callLog: callLog,
);
File reference:
sample_app/lib/call_log_details/cometchat_call_log_details.dart

​
Implementation Flow

  1. User selects the Calls tab in the dashboard
  2. CometChatCallLogs displays recent calls
  3. User taps on a call log entry
  4. App navigates to CometChatCallLogDetails showing call details

​
Customization Options

  • Styling: Override colors, fonts, and list item layouts via UIKit theming
  • Call Type Filters: Apply filters in CometChatCallLogs if supported
  • Empty State: Provide custom UI when no call logs are available

​
Filtering / Edge Cases

  • No Call Logs: Display an empty state message when call history is empty
  • Pagination: Handle large call logs with lazy loading or pagination controls
  • Blocked Users: Indicate or hide entries involving blocked users

​
Error Handling & Blocked-User Handling

  • Network Errors: Show SnackBar or error widgets when fetch fails
  • Blocked Users: Disable detail navigation or show warning if a user is blocked
  • Retry Logic: Offer retry options for failed fetch or navigation

​
Optional Context-Specific Notes

  • Group Calls: CometChatCallLogDetails will list all participants for group calls
  • 1:1 Calls: Details screen focuses on the other participant

​
Summary / Feature Matrix

FeatureComponent / MethodFile(s)
Calls tab integrationCometChatCallLogs(onItemClick)dashboard.dart
Display call logsCometChatCallLogsdashboard.dart
Show call detailsCometChatCallLogDetails(callLog)call_log_details/cometchat_call_log_details.dart

​
Next Steps & Further Reading

Flutter Sample App

Fully functional sample applications to accelerate your development.View on GitHub

UI Kit Source Code

Access the complete UI Kit source code on GitHub.View on GitHub
⌘I