> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```dart theme={null}
// 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`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)

### Display Call Logs

Use `CometChatCallLogs` to fetch and show recent calls.

```dart theme={null}
CometChatCallLogs(
  onItemClick: (callLog) {
    // Navigates to details screen
  },
);
```

**File reference:**\
[`sample_app/lib/dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)

### Show Call Log Details

Present detailed information when a call log is tapped.

```dart theme={null}
CometChatCallLogDetails(
  callLog: callLog,
);
```

**File reference:**\
[`sample_app/lib/call_log_details/cometchat_call_log_details.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/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`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)                                                                     |
| Display call logs     | `CometChatCallLogs`                | [`dashboard.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/dashboard.dart)                                                                     |
| Show call details     | `CometChatCallLogDetails(callLog)` | [`call_log_details/cometchat_call_log_details.dart`](https://github.com/cometchat/cometchat-uikit-flutter/blob/v5/sample_app/lib/call_log_details/cometchat_call_log_details.dart) |

## Next Steps & Further Reading

<CardGroup>
  <Card title="Flutter Sample App">
    Fully functional sample applications to accelerate your development.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)
  </Card>

  <Card title="UI Kit Source Code">
    Access the complete UI Kit source code on GitHub.

    [View on GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit)
  </Card>
</CardGroup>