Overview
TheCometChatCallLogDetails
is a Widget that displays all the information related to a call. This widget displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. Also, it has buttons to start a new call.
- Android
- iOS

CometChatCallLogDetails
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 CometChatCallLogDetails
- Dart
2. Embedding CometChatCallLogDetails
as a Widget in the build Method
- Dart
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.1. OnError
You can customize this behavior by using the provided code snippet to override theOnError
and improve error handling.
- Dart
2. onBack
You can customize this behavior by using the provided code snippet to override theonBack
and improve error handling.
- Dart
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. TheCometChatCallLogDetails
widget does not have any exposed filters.
Events
Events are emitted by aWidget
. 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 CometChatCallLogDetails
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. CallLogDetails Style
You can customize the appearance of theCometChatCallLogDetails
Widget by applying the CallLogDetailsStyle
to it using the following code snippet.
- Dart
- Android
- iOS

CallLogDetailsStyle
Property | Description | Code |
---|---|---|
Arrow Icon Tint | Sets the color for the arrow icon. | arrowIconTint: Color? |
Background | Sets the background color. | background: Color? |
Back Icon Tint | Sets the color for the back icon. | backIconTint: Color? |
Border | Sets the border. | border: BoxBorder? |
Call Status Style | Sets the style for the call status text. | callStatusStyle: TextStyle? |
Count Style | Sets the style for the count text. | countStyle: TextStyle? |
Duration Style | Sets the style for the duration text. | durationStyle: TextStyle? |
Gradient | Sets the background gradient. | gradient: Gradient? |
Height | Sets the height of the widget. | height: double? |
Name Style | Sets the style for the name text. | nameStyle: TextStyle? |
Separator Date Style | Sets the style for the separator date text. | separatorDateStyle: TextStyle? |
Time Style | Sets the style for the time text. | timeStyle: TextStyle? |
Title Style | Sets the style for the title text. | titleStyle: TextStyle? |
Video Call Icon Tint | Sets the color for the video call icon. | videoCallIconTint: Color? |
Voice Call Icon Tint | Sets the color for the voice call icon. | voiceCallIconTint: Color? |
Width | Sets the width of the widget. | width: double? |
2. Avatar Styles
To apply customized styles to theAvatar
widget in the CometChatCallLogDetails
Widget, you can use the following code snippet. For further insights on Avatar
Styles refer
- Dart
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. Example Here is the example for reference:- Dart
- Android
- iOS

Property | Description | Code |
---|---|---|
Arrow Icon | Sets the arrow icon. | arrowIcon: Widget? |
Back Button | Sets the back button widget. | backButton: Widget? |
Date Pattern | Sets the date pattern. | datePattern: String? |
Separator Date Pattern | Sets the separator date pattern. | separatorDatePattern: String? |
Show Back Button | Determines whether to show the back button. | showBackButton: bool |
Theme | Sets the theme. | theme: ThemeData? |
Title | Sets the title. | title: String? |
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.CustomProfile View
You can customize your Profile widget to meet your specific preferences and needs.- Dart
- Android
- iOS

Template and Options
1. Options
TheCometChatCallLogDetailsOption
is the class providing structure for options to be shown.
- Dart
Option
CometChatCallLogDetailsOption
widget.
Property | Description | Code |
---|---|---|
Custom View | Sets a custom view widget. | customView: Widget? |
On Click | Callback function to be executed on click. | onClick: void Function()? |
Tail | Sets the tail widget. | tail: Widget? |
ID | Unique identifier for the option. | id: String |
Height | Sets the height of the option. | height: double? |
Title | Sets the title text. | title: String? |
Icon | Sets the icon URL. | icon: String? |
Package Name | Sets the package name for the icon. | packageName: String? |
Title Style | Sets the text style for the title. | titleStyle: TextStyle? |
2. Template
TheCometChatCallLogDetailsTemplate
defines the structure for sections of options available in the CometChatCallLogDetails
- Dart
CometChatCallLogDetailsTemplate
Property | Description | Code |
---|---|---|
ID | Unique identifier for the template. | id: String |
Options | List of options available in the template. | options: List<CometChatCallLogDetailsOption>? |
Title | Title text for the template. | title: String? |
Title Style | Text style for the title. | titleStyle: TextStyle? |
Section Separator Color | Color for the section separator. | sectionSeparatorColor: Color? |
Hide Section Separator | Flag to hide the section separator. | hideSectionSeparator: bool? |
Item Separator Color | Color for the item separator. | itemSeparatorColor: Color? |
Hide Item Separator | Flag to hide the item separator. | hideItemSeparator: bool? |
- Dart
- Android
- iOS

Configurations
Configurations offer the ability to customize the properties of each widget within a Composite Widget.CometChatCallLogDetails
has Call Log History
, Call Log Recordings
and Call Log Participants
widget. Hence, each of these widgets will have its individual Configuration
.
Configurations
expose properties that are available in its individual widgets.
Call Log History
You can customize the properties of the Call Log History widget by making use of thecallLogHistoryConfiguration
. You can accomplish this by employing the callLogHistoryConfiguration
props as demonstrated below:
- Dart
- Android
- iOS

CallLogHistoryConfiguration
can be found under Call Log History. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Call Log Recordings
You can customize the properties of the Call Log Recordings widget by making use of thecallLogRecordingsConfiguration
. You can accomplish this by employing the callLogRecordingsConfiguration
props as demonstrated below:
- Dart
- Android
- iOS

CallLogRecordingsConfiguration
can be found under Call Log Recordings. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.
Call Log Participants
You can customize the properties of the Call Log Participants widget by making use of thecallLogParticipantsConfiguration
. You can accomplish this by employing the callLogParticipantsConfiguration
props as demonstrated below:
- Dart
- Android
- iOS

CallLogParticipantsConfiguration
can be found under Call Log Participants. Properties marked with the 🛑 symbol are not accessible within the Configuration Object.