Skip to main content
Version: v5

Call Logs

Overview​

CometChatCallLogs is a Widget that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.

Image

The CometChatCallLogs widget is composed of the following BaseWidgets:

WidgetsDescription
CometChatListBaseCometChatListBase is a container widget featuring a title, customizable background options, and a dedicated list widget for seamless integration within your application's interface.
CometChatListItemThis widget displays data retrieved from a CallLog object on a card, presenting a title and subtitle.

Usage​

Integration​

CometChatCallLogs being a wrapper widget, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.

You can launch CometChatCallLogs 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 CometChatCallLogs​
Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogs()));
2. Embedding CometChatCallLogs as a Widget in the build Method​
import 'package:cometchat_calls_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(),
      ),
    );
  }
}

Actions​

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.

onItemClick​

This method proves valuable when users seek to override the onItemClick functionality within CometChatCallLogs, empowering them with greater control and customization options.

The onItemClick action function invoked when a call log item is clicked, typically used to open a detailed chat screen.

CometChatCallLogs(
  onItemClick: (callLog) {
    // TODO("Not yet implemented")
  },
)
onItemLongPress​

Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.

CometChatCallLogs(
  onItemLongPress: (CallLog callLog) {
    // TODO("Not yet implemented")
  },
)
onBack​

onBack is triggered when you press the back button in the app bar. It has a predefined behavior; when clicked, it navigates to the previous activity. However, you can override this action using the following code snippet.

CometChatCallLogs(
  onBack: () {
    // TODO("Not yet implemented")
  },
)
OnError​

This action doesn't change the behavior of the component but rather listens for any errors that occur in the callLogs component.

CometChatCallLogs(
  onError: (e) {
    // TODO("Not yet implemented")
  },
)
onLoad​

Invoked when the list is successfully fetched and loaded, helping track component readiness.

CometChatCallLogs(
  onLoad: (list) {
      // print("Call Logs: $list");
    },
)
onEmpty​

Called when the list is empty, enabling custom handling such as showing a placeholder message.

CometChatCallLogs(
    onEmpty: () {
        // Handle empty call logs
      },
)
onCallLogIconClicked​

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

CometChatCallLogs(
  onCallLogIconClicked: (CallLog callLog) {
    // TODO("Not yet implemented")
  },
)

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.

1. CallLogRequestBuilder​

The CallLogRequestBuilder enables you to filter and customize the call list based on available parameters in CallLogRequestBuilder. This feature allows you to create more specific and targeted queries during the call. The following are the parameters available in CallLogRequestBuilder

Example

In the example below, we are applying a filter based on the limit and have a call recording.

CometChatCallLogs(
  callLogsRequestBuilder: CallLogRequestBuilder()
    ..limit = 10
    ..hasRecording = true,
)

List of properties exposed by CallLogRequestBuilder

PropertyDescriptionCode
Auth TokenSets the authentication token.authToken: String?
Call CategorySets the category of the call.callCategory: String?
Call DirectionSets the direction of the call.callDirection: String?
Call StatusSets the status of the call.callStatus: String?
Call TypeSets the type of the call.callType: String?
GuidSets the unique ID of the group involved in the call.guid: String?
Has RecordingIndicates if the call has a recording.hasRecording: bool
LimitSets the maximum number of call logs to return per request.limit: int
UidSets the unique ID of the user involved in the call.uid: String?

Events​

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 CometChatCallLogs 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​

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

CometChatCallLogs(
  callLogsStyle: CometChatCallLogsStyle(
      titleTextColor: Color(0xFFF76808),
      separatorColor: Color(0xFFF76808),
      avatarStyle: CometChatAvatarStyle(
            borderRadius: BorderRadius.circular(8),
            backgroundColor: Color(0xFFFBAA75),
      ),
   ),
)
Image

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.

MethodsDescriptionCode
showBackButtonUsed to toggle visibility for back button in the app bar.setBackIconVisibility: bool?
hideAppbarUsed to toggle visibility for back button in the app bar.hideAppbar: bool?
CometChatCallLogs(
  backButton: Icon(Icons.add_alert, color: Color(0xFF6851D6)),
)
Image

Below is a list of customizations along with corresponding code snippets

PropertyDescriptionCode
Back ButtonA widget for the back button.backButton: Widget?
Call Logs Request BuilderBuilder for creating call log requests.callLogsRequestBuilder: CallLogRequestBuilder?
Date PatternFormat pattern for date display.datePattern: String?
Date Separator PatternFormat pattern for date separator.dateSeparatorPattern: String?
Empty State TextText to display when there are no call logs.emptyStateText: String?
Error State TextText to display when there is an error.errorStateText: String?
Hide SeparatorWhether to hide the separator between call logs.hideSeparator: bool
Incoming Audio Call IconIcon for incoming audio calls.incomingAudioCallIcon: Icon?
Incoming Video Call IconIcon for incoming video calls.incomingVideoCallIcon: Icon?
Info Icon UrlURL for the info icon.infoIconUrl: String?
Loading Icon UrlURL for the loading icon.loadingIconUrl: String?
Missed Audio Call IconIcon for missed audio calls.missedAudioCallIcon: Icon?
Missed Video Call IconIcon for missed video calls.missedVideoCallIcon: Icon?
Outgoing Audio Call IconIcon for outgoing audio calls.outgoingAudioCallIcon: Icon?
Outgoing Video Call IconIcon for outgoing video calls.outgoingVideoCallIcon: Icon?
Set OptionsSet List of actions available on the long press of list item .setOptions: List<CometChatOption>? Function(Group group,CometChatGroupsController controller, BuildContext context)?
Add Optionsadds into the current List of actions available on the long press of list itemaddOptions: List<CometChatOption>? Function(Group group,CometChatGroupsController controller, BuildContext context)?

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.

setOptions​

Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.

Use Cases:

  • Provide quick call-back options.
  • Allow users to block a number.
  • Enable deleting multiple call logs.
CometChatCallLogs(
    setOptions: (callLog, controller, context) {
        // Set options for call log
    },
)

addOptions​

Adds custom actions to the existing call log options.

Use Cases:

  • Add favorite/star call log option.
  • Add favorite/star call log option.
  • Provide an archive feature.
CometChatCallLogs(
    addOptions: (callLog, controller, context) {
        // Set options for call log
    },
)

ListItemView​

With this property, you can assign a custom ListItem to the Call Logs Widget.

Example

Here is the complete example for reference:

 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 = "";

        if (CometChatUIKit.loggedInUser != null) {
          if (callLog.initiator is CallUser && callLog.receiver is CallUser) {
            CallUser callUserInitiator = callLog.initiator as CallUser;
            CallUser callUserReceiver = callLog.receiver as CallUser;
            if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
              name = callUserReceiver.name ?? "";
            } else {
              name = callUserInitiator.name ?? "";
            }
          } else if (callLog.initiator is CallUser &&
              callLog.receiver is CallGroup) {
            CallUser callUserInitiator = callLog.initiator as CallUser;
            CallGroup callGroupReceiver = callLog.receiver as CallGroup;
            if (CometChatUIKit.loggedInUser?.uid == callUserInitiator.uid) {
              name = callGroupReceiver.name ?? "";
            } else {
              name = callUserInitiator.name ?? "";
            }
          }
        }

        //TODO: import DateFormat from intl package
        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),
                letterSpacing: 0),
          ),
          subtitle: Text(
            status,
            style: TextStyle(
                color: Color(0xFF727272),
                fontSize: 14,
                fontWeight: FontWeight.w400,
                letterSpacing: 0),
          ),
          trailing: Text(
            formattedDate,
            style: TextStyle(
                color: Color(0xFF727272),
                fontSize: 14,
                fontWeight: FontWeight.w400,
                letterSpacing: 0),
          ),
        );
      },
    );
Image

TitleView​

Allows setting a custom title view, typically used for the caller’s name or number.

Use Cases:

  • Display caller’s full name.
  • Show a business label for saved contacts.
  • Use bold text for unknown numbers.

LeadingView​

Customizes the leading view, usually the caller’s avatar or profile picture.

Use Cases:

  • Display a profile picture.
  • Show a call type icon (missed, received, dialed).
  • Indicate call status (e.g., missed calls in red).

SubtitleView​

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

Example

Here is the complete example for reference:

CometChatCallLogs(
      subTitleView: (callLog, context) {
        return Row(
          children: [
            getCallIcon(context, callLog, CometChatUIKit.loggedInUser),
            Text(
              getCallStatus(context, callLog, CometChatUIKit.loggedInUser),
              style: TextStyle(
                  color: Color(0xFF727272),
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  letterSpacing: 0),
            )
          ],
        );
      },
    );
Image

TrailingView​

You can customize the tail widget for each call logs item to meet your requirements

Example

Here is the complete example for reference:

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,
                  fontWeight: FontWeight.w400,
                  letterSpacing: 0),
            );
       },
)
Image

Configurations​

Configurations offer the ability to customize the properties of each widget within a Composite Widget.

CometChatCallLogs has CometChatOutgoingCall widget. Hence, each of these widgets will have its individual `Configuration``.

  • Configurations expose properties that are available in its individual widgets.

Outgoing Call​

You can customize the properties of the OutGoing Call widget by making use of the OutgoingCallConfiguration. You can accomplish this by employing the outgoingCallConfiguration props as demonstrated below:

Example

Here is the complete example for reference:

CometChatCallLogs(
  outgoingCallConfiguration: OutgoingCallConfiguration(
    subtitle: "Outgoing Call",
    outgoingCallStyle: OutgoingCallStyle(
      background: Color(0xFFE4EBF5),
    )
  ),
)
Image

All exposed properties of OutgoingCallConfiguration can be found under OutGoing Call. Properties marked with the report symbol are not accessible within the Configuration Object.