> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Log Details

> Display call history and detailed call information in CometChat Flutter UI Kit.

<Accordion title="AI Agent Component Spec">
  | Field          | Value                                                                             |
  | -------------- | --------------------------------------------------------------------------------- |
  | Package        | `cometchat_chat_uikit`                                                            |
  | Key components | `CometChatCallLogs`, `CometChatCallLogDetails`                                    |
  | Init           | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)`             |
  | Entry point    | Calls tab → `CometChatCallLogs` → tap item → `CometChatCallLogDetails`            |
  | Sample app     | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app) |
  | Related        | [All Guides](/ui-kit/flutter/v5/guide-overview)                                   |
</Accordion>

Call Log Details provides a dedicated Calls tab where users can view recent audio and video calls and inspect detailed information for each call.

Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.

***

## Components

| Component / Class         | Role                                                      |
| :------------------------ | :-------------------------------------------------------- |
| `CometChatCallLogs`       | Displays the list of recent calls with tap callbacks      |
| `CometChatCallLogDetails` | Shows detailed information (participants, duration, type) |
| `CallLog`                 | Call log data model from SDK                              |

***

## Integration Steps

### 1. Add Calls Tab

Integrate the Calls tab into your main dashboard using `CometChatCallLogs`.

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

```dart theme={null}
CometChatCallLogs(
  onItemClick: (callLog) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => CometChatCallLogDetails(callLog: callLog),
      ),
    );
  },
)
```

***

### 2. Display Call Logs

Use `CometChatCallLogs` to fetch and show recent calls with customizable styling.

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

```dart theme={null}
CometChatCallLogs(
  onItemClick: (callLog) {
    // Navigate to details screen
  },
  callLogsStyle: CometChatCallLogsStyle(
    backgroundColor: colorPalette.background1,
  ),
)
```

***

### 3. Show Call Log Details

Present detailed information when a call log is tapped.

*File: [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)*

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

***

## Feature Matrix

| Feature           | Component / Method        | File                                                                                                                                                               |
| :---------------- | :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Calls tab         | `CometChatCallLogs`       | [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)                                                       |
| Call details      | `CometChatCallLogDetails` | [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

<CardGroup cols={2}>
  <Card title="Call Logs" href="/ui-kit/flutter/v5/call-logs">
    Learn more about the Call Logs component.
  </Card>

  <Card title="Call Features" href="/ui-kit/flutter/v5/call-features">
    Explore all calling capabilities.
  </Card>

  <Card title="Call Buttons" href="/ui-kit/flutter/v5/call-buttons">
    Add call buttons to your chat interface.
  </Card>

  <Card title="All Guides" href="/ui-kit/flutter/v5/guide-overview">
    Browse all feature and formatter guides.
  </Card>
</CardGroup>