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

# Call Log Recordings

## Overview

`CometChatCallLogRecordings` is a [Widget](/ui-kit/flutter/v4/components-overview#components) that shows a paginated list of all the calls between the logged-in user & another user or group. This allows the user to see all the calls with a specific user/group they have initiated/received/missed.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/4Rjsfsajp8Hou6fe/images/a4ec13b5-call_logs_recordings_overview_cometchat_screens-ad34da47598e0b02f5fe9ccd10ffa5ac.png?fit=max&auto=format&n=4Rjsfsajp8Hou6fe&q=85&s=f748858695e387b1cad70b44d03415fd" alt="Image" width="4498" height="3121" data-path="images/a4ec13b5-call_logs_recordings_overview_cometchat_screens-ad34da47598e0b02f5fe9ccd10ffa5ac.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/Msoa3RE39lFag8X2/images/24d8b711-call_logs_recordings_overview_cometchat_screens-5eebb449097fdb539568bdeb0b8c47fd.png?fit=max&auto=format&n=Msoa3RE39lFag8X2&q=85&s=347171c6fe64e6b4703f1d99cd795940" alt="Image" width="4498" height="3121" data-path="images/24d8b711-call_logs_recordings_overview_cometchat_screens-5eebb449097fdb539568bdeb0b8c47fd.png" />
  </Tab>
</Tabs>

The `CometChatCallLogRecordings` widget is composed of the following BaseWidgets:

| Widgets                                           | Description                                                                                                                                                                             |
| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [CometChatListBase](/ui-kit/flutter/v4/list-base) | `CometChatListBase` is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface. |
| [CometChatListItem](/ui-kit/flutter/v4/list-item) | This widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle.                                                                                   |

## Usage

### Integration

`CometChatCallLogRecordings` is a Widget, it can be seamlessly presented within your application. To display the details of a CallLog, you simply need to pass the corresponding CallLog object to the `CometChatCallLogRecordings` instance using its setCallLog property. This enables you to efficiently showcase specific call log details within your application's interface.

You can launch `CometChatCallLogRecordings` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatCallLogRecordings`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogRecordings(callLog: callLogObject))); // CallLog object is required to launch the CometChatCallLogRecordings widget.
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatCallLogRecordings` as a Widget in the build Method

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

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

      @override
      State<CallLogRecordingsExample> createState() => _CallLogRecordingsExampleState();
    }

    class _CallLogRecordingsExampleState extends State<CallLogRecordingsExample> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CometChatCallLogRecordings(
              callLog: callLogObject,
            ) // CallLog object is required to launch the CometChatCallLogDetails widget.
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/flutter/v4/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### 1. onDownloadClick

You can customize this behavior by using the provided code snippet to override the `onDownloadClick` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      onDownloadClick: (Recordings recording) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onBack

You can customize this behavior by using the provided code snippet to override the `onBack` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      onBack: () {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 3. onError

You can customize this behavior by using the provided code snippet to override the `onError` and improve error handling.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      onError: (e) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a Widget. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

The `CometChatCallLogRecordings` widget does not have any exposed Filters.

***

### Events

[Events](/ui-kit/flutter/v4/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The `CometChatCallLogHistory` widget does not have any exposed events.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the widget in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget.

##### 1. CallLogHistory Style

You can customize the appearance of the `CallLogHistoryStyle` Widget by applying the `CallLogHistoryStyle` to it using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      recordingsStyle: CallLogRecordingsStyle(
        background: Color(0xFFE4EBF5),
        downLoadIconTint: Colors.red,
        titleStyle: const TextStyle(color: Colors.red, fontFamily: "PlaywritePL"),
        recordingTitleStyle: const TextStyle(color: Colors.red, fontFamily: "PlaywritePL"),
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/gwyRT6PY8hzLhEaL/images/68885573-call_logs_recordings_style_cometchat_screens-c161cab7cc5c305e5823b37b7318e444.png?fit=max&auto=format&n=gwyRT6PY8hzLhEaL&q=85&s=a85a47e9b812b5e503e6870826b3ca39" alt="Image" width="4498" height="3121" data-path="images/68885573-call_logs_recordings_style_cometchat_screens-c161cab7cc5c305e5823b37b7318e444.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/i8B2UGtrYRnZmMmw/images/f5375022-call_logs_recordings_style_cometchat_screens-74aaea7e29236b5bf3a78fa99e682881.png?fit=max&auto=format&n=i8B2UGtrYRnZmMmw&q=85&s=a1fa8d2c0b6d928636076e402ce4813d" alt="Image" width="4498" height="3121" data-path="images/f5375022-call_logs_recordings_style_cometchat_screens-74aaea7e29236b5bf3a78fa99e682881.png" />
  </Tab>
</Tabs>

List of properties exposed by `CallLogHistoryStyle`

| **Property**            | **Description**                              | **Code**                         |
| ----------------------- | -------------------------------------------- | -------------------------------- |
| **width**               | The width of the call log recordings style.  | `double? width`                  |
| **height**              | The height of the call log recordings style. | `double? height`                 |
| **background**          | The background color.                        | `Color? background`              |
| **border**              | The border of the call log recordings style. | `BoxBorder? border`              |
| **borderRadius**        | The border radius.                           | `double? borderRadius`           |
| **gradient**            | The gradient for the background.             | `Gradient? gradient`             |
| **titleStyle**          | The text style for the title.                | `TextStyle? titleStyle`          |
| **dividerTint**         | The tint color for dividers.                 | `Color? dividerTint`             |
| **emptyTextStyle**      | The text style for the empty state.          | `TextStyle? emptyTextStyle`      |
| **backIconTint**        | The tint color for the back icon.            | `Color? backIconTint`            |
| **tailTitleStyle**      | The text style for the tail title.           | `TextStyle? tailTitleStyle`      |
| **recordingTitleStyle** | The text style for the recording title.      | `TextStyle? recordingTitleStyle` |
| **durationTextStyle**   | The text style for the duration.             | `TextStyle? durationTextStyle`   |
| **downLoadIconTint**    | The tint color for the download icon.        | `Color? downLoadIconTint`        |

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      title: "Your Title",
      backButton: Image.asset(
        "assets/img/back.png",
        width: 30,
        height: 30,
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/KBeeQSUYKNgSyZ7m/images/3db8768d-call_logs_recordings_functionality_cometchat_screens-249b7b149d488554fc55b21f91d22ca7.png?fit=max&auto=format&n=KBeeQSUYKNgSyZ7m&q=85&s=119920fdc77ae2c844707a6bed57709b" alt="Image" width="4498" height="3121" data-path="images/3db8768d-call_logs_recordings_functionality_cometchat_screens-249b7b149d488554fc55b21f91d22ca7.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/QITwcxDdX4foDfQZ/images/f2fd6a84-call_logs_recordings_functionality_cometchat_screens-2634fb168882d1c4a5ead035799544c1.png?fit=max&auto=format&n=QITwcxDdX4foDfQZ&q=85&s=7e7afa6782a56ab1c0a7dd7942945117" alt="Image" width="4498" height="3121" data-path="images/f2fd6a84-call_logs_recordings_functionality_cometchat_screens-2634fb168882d1c4a5ead035799544c1.png" />
  </Tab>
</Tabs>

List of methods exposed by `CometChatCallLogHistory`

| **Property**        | **Description**                                   | **Code**                  |
| ------------------- | ------------------------------------------------- | ------------------------- |
| **title**           | The title of the call log recordings.             | `String? title`           |
| **backButton**      | The back button widget.                           | `Widget? backButton`      |
| **showBackButton**  | Indicates whether to show the back button.        | `bool? showBackButton`    |
| **emptyStateText**  | The text to display when there are no recordings. | `String? emptyStateText`  |
| **theme**           | The theme for the widget.                         | `CometChatTheme? theme`   |
| **datePattern**     | The pattern for displaying dates.                 | `String? datePattern`     |
| **hideSeparator**   | Indicates whether to hide separators.             | `bool hideSeparator`      |
| **downloadIconUrl** | The URL for the download icon.                    | `String? downloadIconUrl` |

***

### Advanced

For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets, layouts, and UI elements and then incorporate those into the widget.

#### ListItemView

With this function, you can assign a custom ListItem widget to the `CometChatCallLogRecordings` Widget.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      listItemView: (Recordings recording, BuildContext context) {
        return ListTile(
          title: Text(recording.rid ?? ""),
          subtitle: Text(recording.duration != null ? "${recording.duration}" : "00:00"),
          trailing: SizedBox(
            width: 30,
            child: InkWell(
              onTap: () {
                // TODO("Not yet implemented")
              },
              child: Image.asset("assets/img/downloading.png", width: 30, height: 30),
            ),
          )
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/Msoa3RE39lFag8X2/images/24e293b0-call_logs_recordings_list_item_view_cometchat_screens-8958a14de97c65258e37aa23cc8f9294.png?fit=max&auto=format&n=Msoa3RE39lFag8X2&q=85&s=ae93f16e92536e3e232044d8c5853d76" alt="Image" width="4498" height="3121" data-path="images/24e293b0-call_logs_recordings_list_item_view_cometchat_screens-8958a14de97c65258e37aa23cc8f9294.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/K6i8yVpj9ngiyyle/images/4a8a5e23-call_logs_recordings_list_item_view_cometchat_screens-fb84a7d8cabb3fc1800a61e493f24ede.png?fit=max&auto=format&n=K6i8yVpj9ngiyyle&q=85&s=e0a39078392418f9d161771448237530" alt="Image" width="4498" height="3121" data-path="images/4a8a5e23-call_logs_recordings_list_item_view_cometchat_screens-fb84a7d8cabb3fc1800a61e493f24ede.png" />
  </Tab>
</Tabs>

***

#### SubtitleView

You can customize the subtitle widget for each conversation item to meet your requirements

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      subTitleView: (Recordings recording, BuildContext context) {
        return Row(
          children: [
            InkWell(
              onTap: () {
                // TODO("Not yet implemented")
              },
              child: const Icon(Icons.call, color: Color(0xFF6851D6), size: 25)
            ),
            const SizedBox(width: 10),
            InkWell(
                onTap: () {
                  // TODO("Not yet implemented")
                },
                child: const Icon(Icons.video_call, color: Color(0xFF6851D6), size: 25)
            ),
          ],
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/GfwLNlD2G1QS5oge/images/cfb58e9f-call_logs_recordings_subtitle_view_cometchat_screens-ee677f23229b6e9666148a5650d9fcf3.png?fit=max&auto=format&n=GfwLNlD2G1QS5oge&q=85&s=1de4a7fa307fa613c95406ba6c433412" alt="Image" width="4498" height="3121" data-path="images/cfb58e9f-call_logs_recordings_subtitle_view_cometchat_screens-ee677f23229b6e9666148a5650d9fcf3.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/cjVyusI_GGBVqQQt/images/1b7b3f83-call_logs_recordings_subtitle_view_cometchat_screens-bfa66c1aea9fbd33e89e196f6e89e956.png?fit=max&auto=format&n=cjVyusI_GGBVqQQt&q=85&s=521d97b8fdcfbf1953fc4c8b4266312c" alt="Image" width="4498" height="3121" data-path="images/1b7b3f83-call_logs_recordings_subtitle_view_cometchat_screens-bfa66c1aea9fbd33e89e196f6e89e956.png" />
  </Tab>
</Tabs>

***

#### TailView

Used to generate a custom trailing widget for the `CometChatCallLogRecordings` widget. You can add a Tail widget using the following method.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      tailView: (BuildContext context, Recordings recordings) {
        return SizedBox(
          width: 100,
          child: Row(
            children: [
              InkWell(
                  onTap: () {
                    // TODO("Not yet implemented")
                  },
                  child: const Icon(Icons.call, color: Color(0xFF6851D6), size: 25)
              ),
              const SizedBox(width: 10),
              InkWell(
                  onTap: () {
                    // TODO("Not yet implemented")
                  },
                  child: const Icon(Icons.video_call, color: Color(0xFF6851D6), size: 25)
              ),
            ],
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/dQp5dR1uMW0Wv-GD/images/6ca269c0-call_logs_recordings__tail_view_cometchat_screens-dd2263cb8fd555a56bc713f5cb29e3cc.png?fit=max&auto=format&n=dQp5dR1uMW0Wv-GD&q=85&s=15806628314fea3b0c6478de92992b63" alt="Image" width="4498" height="3121" data-path="images/6ca269c0-call_logs_recordings__tail_view_cometchat_screens-dd2263cb8fd555a56bc713f5cb29e3cc.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/IdVhVuxpbq9MoHCr/images/c5f52a2b-call_logs_recordings__tail_view_cometchat_screens-6e05a89dce43be40429e7a3108894e0a.png?fit=max&auto=format&n=IdVhVuxpbq9MoHCr&q=85&s=98207481354ec518740ee95cea6ad490" alt="Image" width="4498" height="3121" data-path="images/c5f52a2b-call_logs_recordings__tail_view_cometchat_screens-6e05a89dce43be40429e7a3108894e0a.png" />
  </Tab>
</Tabs>

***

#### EmptyStateView

You can set a custom `EmptyStateView` using `emptyStateView` to match the empty UI of your app.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogRecordings(
      callLog: callLogObject,
      emptyStateView: (context) {
        return SizedBox(
          width: MediaQuery.of(context).size.width,
          child: const Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Spacer(),
                  Icon(Icons.sms_failed_outlined, color: Colors.red, size: 100,),
                  SizedBox(height: 20,),
                  Text("Your Custom Message"),
                  Spacer(),
                ],
              )
          ),
        );
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/4KFDGiC5bteghl-_/images/51bb6545-call_logs_recordings_empty_state_view_cometchat_screens-b2fa712d9e2b089a8b60940868cc1615.png?fit=max&auto=format&n=4KFDGiC5bteghl-_&q=85&s=f525dea145fa8768dcc253b8e7c4e80b" alt="Image" width="4498" height="3121" data-path="images/51bb6545-call_logs_recordings_empty_state_view_cometchat_screens-b2fa712d9e2b089a8b60940868cc1615.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/pkXPFA9z6doveCm5/images/ed829dd9-call_logs_recordings_empty_state_view_cometchat_screens-98d95b517317264e36acac30445f6205.png?fit=max&auto=format&n=pkXPFA9z6doveCm5&q=85&s=afc3173510d14af8e9934bfb10aafc45" alt="Image" width="4498" height="3121" data-path="images/ed829dd9-call_logs_recordings_empty_state_view_cometchat_screens-98d95b517317264e36acac30445f6205.png" />
  </Tab>
</Tabs>

***