Managing & Viewing Call Logs in Your Flutter Chat App

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

Component	Role
CometChatCallLogs	Displays the list of recent calls with tap callbacks
CometChatCallLogDetails	Shows detailed information (participants, duration, type)
dashboard.dart	Contains the Calls tab integration in the main UI
call_log_details/cometchat_call_log_details.dart	Implements 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

Feature	Component / Method	File(s)
Calls tab integration	CometChatCallLogs(onItemClick)	dashboard.dart
Display call logs	CometChatCallLogs	dashboard.dart
Show call details	CometChatCallLogDetails(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