> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.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.

<Accordion title="AI Integration Quick Reference">
  | Field         | Value                                                                                                                                                                          |
  | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Component     | `CometChatCallLogs`                                                                                                                                                            |
  | Package       | `cometchat_chat_uikit`                                                                                                                                                         |
  | Import        | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';`                                                                                                            |
  | Barrel        | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both.                                       |
  | Purpose       | Show CometChat Flutter UI Kit call logs with audio/video status, missed calls, timestamps, pagination, and call actions.                                                       |
  | Data props    | `callLogsRequestBuilder`                                                                                                                                                       |
  | Actions       | `onItemClick` · `onError` · `onBack` · `onCallLogIconClicked` · `onItemLongPress` · `onEmpty` · `onLoad` — [details](#actions-and-events)                                      |
  | View slots    | `listItemView` · `subTitleView` · `emptyStateView` · `errorStateView` · `loadingStateView` · `trailingView` · `leadingStateView` · `titleView` — [details](#custom-view-slots) |
  | Styling       | `callLogsStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here.                                                                               |
  | Layout        | Fills its parent — place it in an `Expanded` (or a sized box) inside a `Column`, or layout throws an unbounded-height error at render.                                         |
  | Prerequisites | `CometChatUIKit` initialised and a user logged in.                                                                                                                             |
  | Full props    | [33 props](#functionality)                                                                                                                                                     |
</Accordion>

`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-skills-v5-temp/vfCidsiCaQW-Jkxb/images/2cd314f4-call_logs-e92a7499f211eaa3e4e6aabfac684dba.png?fit=max&auto=format&n=vfCidsiCaQW-Jkxb&q=85&s=997f5d7512e165b26f5599fb3d33cf74" 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) => CallLogDetailsScreen(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");
      },
    )
    ```
  </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                                                                                                                    |
| --------------------------- | ----------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `listItemView`              | `Widget? Function(CallLog callLog, BuildContext context)?`                                      | `null`  | `listItemView` set custom view for each callLog                                                                                |
| `subTitleView`              | `Widget? Function(CallLog callLog, BuildContext context)?`                                      | `null`  | `subTitleView` set custom sub title view for each callLog                                                                      |
| `backButton`                | `Widget?`                                                                                       | `null`  | Custom back button widget                                                                                                      |
| `emptyStateView`            | `WidgetBuilder?`                                                                                | `null`  | `emptyStateView` returns view fow empty state                                                                                  |
| `errorStateView`            | `WidgetBuilder?`                                                                                | `null`  | `errorStateView` returns view fow error state                                                                                  |
| `loadingStateView`          | `WidgetBuilder?`                                                                                | `null`  | `loadingStateView` returns view fow loading state                                                                              |
| `onItemClick`               | `Function(CallLog callLog)?`                                                                    | `null`  | `onItemClick` callback triggered on clicking of the callLog item                                                               |
| `onError`                   | `OnError?`                                                                                      | `null`  | `onError` callback triggered in case any error happens when fetching callLogs                                                  |
| `onBack`                    | `VoidCallback?`                                                                                 | `null`  | `onBack` callback triggered on closing this screen                                                                             |
| `trailingView`              | `Function(BuildContext context, CallLog callLog)?`                                              | `null`  | `trailingView` a custom widget for the tail section of the callLog list item                                                   |
| `callLogsBuilderProtocol`   | `CallLogsBuilderProtocol?`                                                                      | `null`  | `callLogsBuilderProtocol` set custom call Log request builder protocol                                                         |
| `datePattern`               | `String?`                                                                                       | `null`  | Format pattern for date display                                                                                                |
| `dateSeparatorPattern`      | `String?`                                                                                       | `null`  | Format pattern for date separator                                                                                              |
| `callLogsStyle`             | `CometChatCallLogsStyle?`                                                                       | `null`  | `callLogsStyle` style for every call logs                                                                                      |
| `callLogsRequestBuilder`    | `CallLogRequestBuilder?`                                                                        | `null`  | `callLogsRequestBuilder` set custom conversations request builder                                                              |
| `outgoingCallConfiguration` | `CometChatOutgoingCallConfiguration?`                                                           | `null`  | `outgoingCallConfiguration` is a object of `CometChatOutgoingCallConfiguration` which sets the configuration for outgoing call |
| `audioCallIcon`             | `Widget?`                                                                                       | `null`  | `audioCallIcon` custom audio call icon                                                                                         |
| `videoCallIcon`             | `Widget?`                                                                                       | `null`  | `videoCallIcon` custom video call icon                                                                                         |
| `incomingCallIcon`          | `Widget?`                                                                                       | `null`  | `incomingCallIcon` custom incoming call icon                                                                                   |
| `outgoingCallIcon`          | `Widget?`                                                                                       | `null`  | `outgoingCallIcon` custom outgoing call icon                                                                                   |
| `missedCallIcon`            | `Widget?`                                                                                       | `null`  | `missedCallIcon` custom missed call icon                                                                                       |
| `hideAppbar`                | `bool?`                                                                                         | `false` | Toggle app bar visibility                                                                                                      |
| `appBarOptions`             | `List<Widget>?`                                                                                 | `null`  | `appBarOptions` list of options to be visible in app bar                                                                       |
| `onCallLogIconClicked`      | `Function(CallLog callLog)?`                                                                    | `null`  | `onCallLogIconClicked` callback triggered on clicking of the callLog icon audio/video icon                                     |
| `onItemLongPress`           | `Function(CallLog callLog)?`                                                                    | `null`  | `onItemLongPress` callback triggered on long pressing of the callLog item                                                      |
| `addOptions`                | `List<CometChatOption>? Function( CallLog callLog, CallLogsBloc bloc, BuildContext context, )?` | `null`  | `addOptions` adds into the current List of actions available on the long press of list item                                    |
| `setOptions`                | `List<CometChatOption>? Function( CallLog callLog, CallLogsBloc bloc, BuildContext context, )?` | `null`  | `setOptions` sets List of actions available on the long press of list item                                                     |
| `onEmpty`                   | `OnEmpty?`                                                                                      | `null`  | `onEmpty` callback triggered when the list is empty                                                                            |
| `onLoad`                    | `OnLoad<CallLog>?`                                                                              | `null`  | `onLoad` callback triggered when list is fetched and load                                                                      |
| `leadingStateView`          | `Widget? Function(BuildContext, CallLog)?`                                                      | `null`  | `leadingStateView` to set leading view for each callLog                                                                        |
| `titleView`                 | `Widget? Function(BuildContext, CallLog)?`                                                      | `null`  | `titleView` to set title view for each callLog                                                                                 |
| `showBackButton`            | `bool?`                                                                                         | `null`  | Toggle back button visibility                                                                                                  |
| `callLogsBloc`              | `CallLogsBloc?`                                                                                 | `null`  | `callLogsBloc` Optional external CallLogsBloc instance.                                                                        |

**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-skills-v5-temp/kkAyYhvWZi9rj6-C/images/b63f7edc-call_logs_functionality_cometchat_screens-9440a7269b6a247eec0ea0b0be9853d7.png?fit=max&auto=format&n=kkAyYhvWZi9rj6-C&q=85&s=c9bdbc753f62607751d2a00ab38c74cb" 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-skills-v5-temp/g7_6yYPMlSh3W3jP/images/7d1ac343-call_logs_functionality_cometchat_screens-6da1c65caba38476d7a76ef530beef6d.png?fit=max&auto=format&n=g7_6yYPMlSh3W3jP&q=85&s=21a02962f4a4ae91b46fc0bf2beb1492" 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-skills-v5-temp/vfCidsiCaQW-Jkxb/images/2c9ff0e2-call_logs_list_item_view-0ce23bdea51caf6a160a1d29336a8079.png?fit=max&auto=format&n=vfCidsiCaQW-Jkxb&q=85&s=1e3d46fee450f55677bd6af4b1258a4c" 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(
      leadingStateView: (context, callLog) {
        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-skills-v5-temp/B3vIpZUW9RfXWDxg/images/f6dd73cd-call_logs_subtitle_view-56e85253ead39acb41b05c54f4193fa5.png?fit=max&auto=format&n=B3vIpZUW9RfXWDxg&q=85&s=ffb9920a537f754bb680d7aa4f8437c3" 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-skills-v5-temp/dXdPLieVoqwmgqSq/images/6ea9f1f9-call_logs_tail_view-cb6d574e764966d8c90d14eac6cff3ef.png?fit=max&auto=format&n=dXdPLieVoqwmgqSq&q=85&s=17e1d04bd20c83bd2c38df57ab8a2a14" 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-skills-v5-temp/Lvw7Th8qlc9k9jIo/images/8b6613da-call_logs_styling-d5342d812a143246feaf901a3128b234.png?fit=max&auto=format&n=Lvw7Th8qlc9k9jIo&q=85&s=90c8511eb27c3a7562b4cf7d142e3584" 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-skills-v5-temp/RWqdtHr8LDvKNOjC/images/e8884743-call_logs_outgoing_call_config_cometchat_screens-74adaf62cb240d32b466c122d66e98d2.png?fit=max&auto=format&n=RWqdtHr8LDvKNOjC&q=85&s=05d7b145a232a2ccccd958c583616a93" 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-skills-v5-temp/3HroRDtXpn9_H-Gz/images/de8acec6-call_logs_outgoing_call_config_cometchat_screens-836ab1ccf71553f8991268445fb70852.png?fit=max&auto=format&n=3HroRDtXpn9_H-Gz&q=85&s=ab2e39268c748eefaf0b37fc5000ded5" 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>