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

# Call Logs

> Show CometChat Flutter UI Kit call logs with audio/video status, missed calls, timestamps, pagination, and call actions.

`CometChatCallLogs` renders a scrollable list of call history with call type indicators (audio/video), call status (incoming/outgoing/missed), timestamps, and pagination support.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2cd314f4-call_logs-e92a7499f211eaa3e4e6aabfac684dba.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=3514621c3eff56dcbd44a4e06fee04e4" width="2560" height="1600" data-path="images/2cd314f4-call_logs-e92a7499f211eaa3e4e6aabfac684dba.png" />
</Frame>

The `CometChatCallLogs` widget is composed of the following base widgets:

| Widget            | Description                                                           |
| ----------------- | --------------------------------------------------------------------- |
| CometChatListBase | Container widget with title, background options, and list integration |
| CometChatListItem | Displays call log data on a card with title and subtitle              |

***

## Where It Fits

`CometChatCallLogs` is a list component. It renders call history and emits the selected `CallLog` via `onItemClick`. Wire it to a detail screen or use `onCallLogIconClicked` to initiate a call directly from the log.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onItemClick: (callLog) {
        // Navigate to call log details or open chat
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => CometChatCallLogDetails(callLog: callLog),
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

## Quick Start

Using Navigator:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatCallLogs()));
    ```
  </Tab>
</Tabs>

Embedding as a widget:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
    import 'package:flutter/material.dart';

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

      @override
      State<CallLogsExample> createState() => _CallLogsExampleState();
    }

    class _CallLogsExampleState extends State<CallLogsExample> {
      @override
      Widget build(BuildContext context) {
        return const Scaffold(
          body: SafeArea(child: CometChatCallLogs()),
        );
      }
    }
    ```
  </Tab>
</Tabs>

Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()`, a user logged in, and the Calls UIKit dependency added. See [Call Features](/ui-kit/flutter/call-features) for setup.

***

## Filtering Call Logs

Pass a `CallLogRequestBuilder` to control what loads:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      callLogsRequestBuilder: CallLogRequestBuilder()
        ..limit = 10
        ..hasRecording = true,
    )
    ```
  </Tab>
</Tabs>

### Filter Recipes

| Recipe                    | Builder property               |
| ------------------------- | ------------------------------ |
| Limit per page            | `..limit = 10`                 |
| Audio calls only          | `..callType = "audio"`         |
| Video calls only          | `..callType = "video"`         |
| Missed calls only         | `..callStatus = "missed"`      |
| Incoming calls only       | `..callDirection = "incoming"` |
| Outgoing calls only       | `..callDirection = "outgoing"` |
| Calls with recording      | `..hasRecording = true`        |
| Calls for specific user   | `..uid = "user_uid"`           |
| Calls for specific group  | `..guid = "group_guid"`        |
| Call category (call/meet) | `..callCategory = "call"`      |

### Filter Properties

| Property        | Type      | Description                                                                                                      |
| --------------- | --------- | ---------------------------------------------------------------------------------------------------------------- |
| `authToken`     | `String?` | Authentication token                                                                                             |
| `callCategory`  | `String?` | Category: `"call"` or `"meet"`                                                                                   |
| `callDirection` | `String?` | Direction: `"incoming"` or `"outgoing"`                                                                          |
| `callStatus`    | `String?` | Status: `"ongoing"`, `"busy"`, `"rejected"`, `"cancelled"`, `"ended"`, `"missed"`, `"initiated"`, `"unanswered"` |
| `callType`      | `String?` | Type: `"audio"`, `"video"`, or `"audio/video"`                                                                   |
| `guid`          | `String?` | Group ID filter                                                                                                  |
| `hasRecording`  | `bool`    | Filter calls with recordings                                                                                     |
| `limit`         | `int`     | Max results per request                                                                                          |
| `uid`           | `String?` | User ID filter                                                                                                   |

***

## Actions and Events

### Callback Methods

#### `onItemClick`

Fires when a call log item is tapped. Primary navigation hook.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onItemClick: (callLog) {
        // Navigate to call details or chat
      },
    )
    ```
  </Tab>
</Tabs>

#### `onItemLongPress`

Fires when a call log item is long-pressed, allowing additional actions.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onItemLongPress: (CallLog callLog) {
        // Show context menu
      },
    )
    ```
  </Tab>
</Tabs>

#### `onBack`

Fires when the user presses the back button in the app bar.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onBack: () {
        Navigator.pop(context);
      },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

Fires on internal errors (network failure, SDK exception).

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onError: (e) {
        debugPrint("Error: ${e.message}");
      },
    )
    ```
  </Tab>
</Tabs>

#### `onLoad`

Fires when the list is successfully fetched and loaded.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onLoad: (list) {
        debugPrint("Loaded ${list.length} call logs");
      },
    )
    ```
  </Tab>
</Tabs>

#### `onEmpty`

Fires when the list is empty after loading.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onEmpty: () {
        debugPrint("No call logs found");
      },
    )
    ```
  </Tab>
</Tabs>

#### `onCallLogIconClicked`

Fires when the call icon on a call log item is tapped, typically used to initiate a call back.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      onCallLogIconClicked: (CallLog callLog) {
        // Initiate call back to this contact
      },
    )
    ```
  </Tab>
</Tabs>

### Events

The `CometChatCallLogs` widget does not emit global events.

***

## Functionality

| Property                | Type      | Default | Description                          |
| ----------------------- | --------- | ------- | ------------------------------------ |
| `showBackButton`        | `bool?`   | `true`  | Toggle back button visibility        |
| `hideAppbar`            | `bool?`   | `false` | Toggle app bar visibility            |
| `backButton`            | `Widget?` | `null`  | Custom back button widget            |
| `datePattern`           | `String?` | `null`  | Format pattern for date display      |
| `dateSeparatorPattern`  | `String?` | `null`  | Format pattern for date separator    |
| `hideSeparator`         | `bool`    | `false` | Hide separator between items         |
| `emptyStateText`        | `String?` | `null`  | Text for empty state                 |
| `errorStateText`        | `String?` | `null`  | Text for error state                 |
| `incomingAudioCallIcon` | `Icon?`   | `null`  | Custom icon for incoming audio calls |
| `incomingVideoCallIcon` | `Icon?`   | `null`  | Custom icon for incoming video calls |
| `outgoingAudioCallIcon` | `Icon?`   | `null`  | Custom icon for outgoing audio calls |
| `outgoingVideoCallIcon` | `Icon?`   | `null`  | Custom icon for outgoing video calls |
| `missedAudioCallIcon`   | `Icon?`   | `null`  | Custom icon for missed audio calls   |
| `missedVideoCallIcon`   | `Icon?`   | `null`  | Custom icon for missed video calls   |
| `infoIconUrl`           | `String?` | `null`  | URL for the info icon                |
| `loadingIconUrl`        | `String?` | `null`  | URL for the loading icon             |

**Example — custom back button:**

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      backButton: Icon(Icons.arrow_back_ios, color: Color(0xFF6851D6)),
    )
    ```
  </Tab>
</Tabs>

<img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=9f9a8bbd4563c375f98f1a2532f86121" alt="Image" width="4498" height="3121" data-path="images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png" />

<img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=6b8934f51590a09e8f9964b11c3ccb03" alt="Image" width="4498" height="3121" data-path="images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png" />

***

## Custom View Slots

### List Item View

Replace the entire list item row with a custom widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      listItemView: (callLog, context) {
        final status = getCallStatus(context, callLog, CometChatUIKit.loggedInUser);
        IconData icon = Icons.call;
        Color? color;
        Color? textColor;

        if (status == "Incoming Call") {
          icon = Icons.phone_callback_rounded;
          color = Color(0xFF6852D6);
        } else if (status == "Outgoing Call") {
          icon = Icons.phone_forwarded;
          color = Color(0xFF6852D6);
        } else if (status == "Missed Call") {
          icon = Icons.phone_missed;
          color = Colors.red;
          textColor = Colors.red;
        }

        String name = _getCallLogName(callLog);
        String formattedDate = DateFormat('d MMM, hh:mm a').format(
          DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
        );

        return ListTile(
          leading: CircleAvatar(
            backgroundColor: Color(0xFFEDEAFA),
            child: Icon(icon, color: color, size: 24),
          ),
          title: Text(name, style: TextStyle(
            fontSize: 16, fontWeight: FontWeight.w500,
            color: textColor ?? Color(0xFF141414),
          )),
          subtitle: Text(status, style: TextStyle(
            color: Color(0xFF727272), fontSize: 14,
          )),
          trailing: Text(formattedDate, style: TextStyle(
            color: Color(0xFF727272), fontSize: 14,
          )),
        );
      },
    )
    ```
  </Tab>

  <Tab title="Helper: getCallStatus">
    ```dart theme={null}
    static String getCallStatus(BuildContext context, CallLog callLog, User? loggedInUser) {
      String callMessageText = "";
      if (callLog.receiverType == ReceiverTypeConstants.user) {
        CallUser initiator = callLog.initiator as CallUser;
        bool isMe = initiator.uid == loggedInUser?.uid;

        switch (callLog.status) {
          case CallStatusConstants.initiated:
            callMessageText = isMe ? "Outgoing Call" : "Incoming Call";
            break;
          case CallStatusConstants.ongoing:
            callMessageText = "Call Accepted";
            break;
          case CallStatusConstants.ended:
            callMessageText = "Call Ended";
            break;
          case CallStatusConstants.unanswered:
          case CallStatusConstants.cancelled:
          case CallStatusConstants.rejected:
          case CallStatusConstants.busy:
            callMessageText = isMe ? "Call ${callLog.status}" : "Missed Call";
            break;
        }
      }
      return callMessageText;
    }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2c9ff0e2-call_logs_list_item_view-0ce23bdea51caf6a160a1d29336a8079.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=3d6b79a29798a0c0eb4001357bf25e13" width="2560" height="1600" data-path="images/2c9ff0e2-call_logs_list_item_view-0ce23bdea51caf6a160a1d29336a8079.png" />
</Frame>

### Title View

Replace the caller name / title text.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      titleView: (callLog, context) {
        return Text(
          _getCallLogName(callLog),
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Leading View

Replace the avatar / left section.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      leadingView: (callLog, context) {
        return CircleAvatar(
          backgroundColor: Color(0xFFEDEAFA),
          child: Icon(Icons.call, color: Color(0xFF6852D6)),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Subtitle View

Replace the call status text below the name.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      subTitleView: (callLog, context) {
        return Row(
          children: [
            _getCallIcon(callLog, CometChatUIKit.loggedInUser),
            SizedBox(width: 4),
            Text(
              getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
              style: TextStyle(color: Color(0xFF727272), fontSize: 14),
            ),
          ],
        );
      },
    )
    ```
  </Tab>

  <Tab title="Helper: _getCallIcon">
    ```dart theme={null}
    static Widget _getCallIcon(CallLog callLog, User? loggedInUser) {
      bool isMe = (callLog.initiator as CallUser?)?.uid == loggedInUser?.uid;

      Widget incoming = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);
      Widget outgoing = Icon(Icons.call_made_outlined, color: Color(0xFF09C26F), size: 16);
      Widget missed = Icon(Icons.call_received_outlined, color: Colors.red, size: 16);

      switch (callLog.status) {
        case CallStatusConstants.initiated:
        case CallStatusConstants.ongoing:
        case CallStatusConstants.ended:
          return isMe ? outgoing : incoming;
        case CallStatusConstants.unanswered:
        case CallStatusConstants.cancelled:
        case CallStatusConstants.rejected:
        case CallStatusConstants.busy:
          return isMe ? outgoing : missed;
        default:
          return const SizedBox();
      }
    }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f6dd73cd-call_logs_subtitle_view-56e85253ead39acb41b05c54f4193fa5.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=8dee38cc063c6b9706dd19f4821eb865" width="2560" height="1600" data-path="images/f6dd73cd-call_logs_subtitle_view-56e85253ead39acb41b05c54f4193fa5.png" />
</Frame>

### Trailing View

Replace the timestamp / right section.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      trailingView: (context, callLog) {
        String formattedDate = DateFormat('d MMM, hh:mm a').format(
          DateTime.fromMillisecondsSinceEpoch((callLog.initiatedAt ?? 0) * 1000),
        );
        return Text(
          formattedDate,
          style: TextStyle(color: Color(0xFF727272), fontSize: 14),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/6ea9f1f9-call_logs_tail_view-cb6d574e764966d8c90d14eac6cff3ef.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=3234ce93d1866d133ac9610e7f1f2937" width="2560" height="1600" data-path="images/6ea9f1f9-call_logs_tail_view-cb6d574e764966d8c90d14eac6cff3ef.png" />
</Frame>

### State Views

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      emptyStateView: (context) => Center(child: Text("No call logs yet")),
      errorStateView: (context) => Center(child: Text("Something went wrong")),
      loadingStateView: (context) => Center(child: CircularProgressIndicator()),
    )
    ```
  </Tab>
</Tabs>

***

## Menu Options

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // Replace all options
    CometChatCallLogs(
      setOptions: (callLog, controller, context) {
        return [
          CometChatOption(
            id: "callback",
            iconWidget: Icon(Icons.call),
            title: "Call Back",
            onClick: () {
              // Initiate call back
            },
          ),
        ];
      },
    )

    // Append to defaults
    CometChatCallLogs(
      addOptions: (callLog, controller, context) {
        return [
          CometChatOption(
            id: "block",
            iconWidget: Icon(Icons.block),
            title: "Block Number",
            onClick: () {
              // Block this contact
            },
          ),
        ];
      },
    )
    ```
  </Tab>
</Tabs>

***

## Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      callLogsStyle: CometChatCallLogsStyle(
        titleTextColor: Color(0xFFF76808),
        separatorColor: Color(0xFFF76808),
        avatarStyle: CometChatAvatarStyle(
          borderRadius: BorderRadius.circular(8),
          backgroundColor: Color(0xFFFBAA75),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/8b6613da-call_logs_styling-d5342d812a143246feaf901a3128b234.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=1009f4fb61dff6eac44af46df9233768" width="2560" height="1600" data-path="images/8b6613da-call_logs_styling-d5342d812a143246feaf901a3128b234.png" />
</Frame>

***

## Configurations

### Outgoing Call

Customize the outgoing call component that appears when a call is initiated from a call log:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogs(
      outgoingCallConfiguration: OutgoingCallConfiguration(
        subtitle: "Outgoing Call",
        outgoingCallStyle: OutgoingCallStyle(
          background: Color(0xFFE4EBF5),
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

<img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/e8884743-call_logs_outgoing_call_config_cometchat_screens-74adaf62cb240d32b466c122d66e98d2.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=48873fa44ccf3634ed75f6d6aed06db2" alt="Image" width="4498" height="3121" data-path="images/e8884743-call_logs_outgoing_call_config_cometchat_screens-74adaf62cb240d32b466c122d66e98d2.png" />

<img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/de8acec6-call_logs_outgoing_call_config_cometchat_screens-836ab1ccf71553f8991268445fb70852.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=bac0e32ab04ec28d5a1f592c0c70b977" alt="Image" width="4498" height="3121" data-path="images/de8acec6-call_logs_outgoing_call_config_cometchat_screens-836ab1ccf71553f8991268445fb70852.png" />

All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/flutter/outgoing-call).

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Log Details Guide" icon="circle-info" href="/ui-kit/flutter/guide-call-log-details">
    Build a call log details screen
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/flutter/call-buttons">
    Add voice and video call buttons
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/flutter/component-styling">
    Detailed styling reference
  </Card>

  <Card title="Conversations" icon="comments" href="/ui-kit/flutter/conversations">
    Browse recent conversations
  </Card>
</CardGroup>