Upgrading from V4 to V5

Introduction

The CometChat v5 Flutter UI Kit streamlines the integration of in-app chat functionality into your applications. Packed with prebuilt, modular UI components, it supports essential messaging features for both one-to-one and group conversations. With built-in theming options, including light and dark modes, customizable fonts, colors, and extensive configuration possibilities, developers can create chat experiences tailored to their application’s needs.

Integration

In v4, integration was straightforward due to the availability of composite components like CometChatConversationsWithMessages. This single component provided end-to-end functionality, including listing conversations, handling conversation clicks, loading messages (message header, list, composer), displaying user or group details, and supporting threaded messages. Developers could achieve all these features with minimal setup. However, customization posed significant challenges. Customizing the UI or adding custom views required a deep understanding of the internal flow of the composite component. Additionally, configurations were a mix of custom view props, behavioural props, and style props, which often led to confusion. Styling deeply nested components also proved cumbersome, limiting the developer’s ability to make meaningful changes.

With v5, composite components have been replaced with smaller, modular components, such as Conversations, Message Header, Message List, and Message Composer. This modular approach makes integration more flexible and easier to understand. Each component has a well-defined purpose, allowing developers to use them in ways that suit their specific requirements. The need for complex configurations has been eliminated, as developers can now customize behavior and styling directly via props. Styling has been significantly simplified, with every component carefully assigned, enabling developers to customize styles globally or at the component level effortlessly.

To support the transition from v4 to v5, CometChat has built a sample app that replicates the functionality of v4’s composite components. This sample app serves as a reference for developers looking to build additional features such as user/group details, call log details, threaded messages, and advanced messaging capabilities. By following this approach, developers can take full advantage of v5’s modular design while implementing complex functionality in an organized manner.

Learn how to build a complete messaging UI using the v5 UI Kit by following the step-by-step guide here.

Components

The v4 UI Kit provided composite components like CometChatConversationsWithMessages, which offered end-to-end functionality. These components integrated features such as conversation lists, message views (header, list, composer), user/group details, and threaded messages into a single unit. However, customization of deeply nested components through configuration was challenging and resulted in a suboptimal developer experience.

Components in v4 UI Kit:
CometChatConversationsWithMessages	CometChatUsersWithMessages	CometChatGroupsWithMessages
CometChatMessages	CometChatMessageHeader	CometChatMessageList
CometChatMessageComposer	CometChatThreadedMessages	CometChatConversations
CometChatUsers	CometChatGroups	CometChatContacts
CometChatDetails	CometChatGroupMembers	CometChatAddMembers
CometChatBannedMembers	CometChatTransferOwnership	CometChatMessageInformation
CometChatIncomingCall	CometChatOngoingCall	CometChatOutgoingCall
CometChatCallButtons	CometChatCallLogs	CometChatCallLogDetails
CometChatCallLogHistory	CometChatCallLogRecordings	CometChatCallLogParticipants
CometChatCallLogsWithDetails

In v5, the composite approach is replaced with smaller, modular components like Conversations, Message Header, Message List, and Message Composer. Developers now need to stitch these components together to build the desired functionality. This change allows for greater flexibility and easier customization via props, significantly improving the developer experience while maintaining functionality.

Components in v5 UI Kit:
CometChatConversations	CometChatUsers	CometChatGroups
CometChatGroupMembers	CometChatMessageHeader	CometChatMessageList
CometChatMessageComposer	CometChatThreadedHeader	CometChatIncomingCall
CometChatOutgoingCall	CometChatCallButtons	CometChatCallLogs

Theming

In v4, theming was managed using the CometChatTheme class along with the Palette and Typography classes. The Palette class provided methods like backGroundColor, mode, accent, and similar setters for configuring colors and themes. While this approach worked, it required instantiating multiple objects and passing them through constructors, which added complexity to the theming process. Developers had to create palette and typography instances, configure them with various color and font settings, and then pass them to create a theme object.

The reliance on Context for theming introduced several challenges. Customizing themes often required developers to consume the theme from the context and then explicitly update values programmatically, which added unnecessary complexity. For example, switching between light and dark modes required interacting with the theme’s context and invoking specific methods like mode. This process was less straightforward compared to the traditional approach to define themes dynamically.

Palette palette = const Palette(
  mode: PaletteThemeModes.light,
  primary: PaletteModel(light: Color(0xFF6851D6), dark: Color(0xFF6851D6)),
);

Typography typography = Typography(
  heading: FontStyle(fontSize: 14, fontFamily: "Roboto"),
);

CometChatTheme cometChatTheme = CometChatTheme(
  palette: palette,
  typography: typography,
);

In v5, theming has been completely revamped for simplicity and directness. The complex theming classes and object instantiation have been replaced with direct static property assignment on CometChatColorPalette and CometChatTypography. This means every design token, such as colors and typography, can now be set directly as static properties. Changing the primary color, for instance, is as simple as assigning a value to CometChatColorPalette().primary — no need to interact with complex theming logic or instantiate multiple objects.

The new theming approach is declarative and lightweight, significantly enhancing both performance and developer experience. By providing direct access to theme properties, developers can now customize the look and feel of their application with minimal code and maximum clarity.

main.dart

ThemeData(
  fontFamily: 'Times New Roman',
  extensions: [
    CometChatColorPalette(
      primary: Color(0xFFF76808),
      textPrimary: Color(0xFF141414),
      background1: Color(0xFFFFFFFF),
    ),
    CometChatMessageListStyle(
      outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
      incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
);

This architectural redesign makes theming more intuitive and aligns with modern Flutter development practices. Developers now have a more powerful and straightforward toolset to customize and manage themes effectively.

For detailed guidance on theming and customizing colors in the CometChat React UI Kit, refer to the following resources:

• Theming Documentation: Guide to Theming
• Color Customization: Customizing Colors

Properties

In v5, the approach to component properties has been significantly refined to improve clarity and ease of use. All style-related properties have been streamlined to work seamlessly with the new theming system based on direct property access. This change ensures a more efficient and flexible styling process without the need for verbose or redundant configuration within the component properties.

Configuration properties, which were prominent in v4, have also been simplified. With v5’s modular design, components are no longer deeply nested, making complex configurations unnecessary. Developers now have direct control over each component through clearly defined properties, reducing complexity and increasing flexibility in how components are used and styled.

Custom view properties have undergone a comprehensive overhaul to ensure consistency across all components. For example, components that are represented as list items now share a uniform set of customizable properties, enabling a standardized approach to customization. These properties include:

• itemView - Custom view for the entire item
• leadingView - Custom view for the leading section
• trailingView - Custom view for the trailing section
• subtitleView - Custom view for the subtitle
• titleView - Custom view for the title

This consistent naming convention makes it easier for developers to understand and apply customizations across various components, streamlining the development process.

The following sections provide a comprehensive overview of newly added, renamed, and removed properties for each component.

Conversations

New Properties

Name	Type	Description
scrollController	ScrollController?	Controller to handle scrolling behavior in the conversations list.
datePadding	EdgeInsets?	Provides padding for the date component.
dateHeight	double?	Provides height for the date component.
dateBackgroundIsTransparent	bool?	Controls the background transparency of the date component.
dateWidth	double?	Provides width for the date component.
badgeWidth	double?	Provides width for the badge component.
badgeHeight	double?	Provides height for the badge component.
badgePadding	EdgeInsetsGeometry?	Provides padding for the badge component.
statusIndicatorWidth	double?	Provides width for the status indicator.
statusIndicatorHeight	double?	Provides height for the status indicator.
statusIndicatorBorderRadius	BorderRadiusGeometry?	Provides border radius for the status indicator.
avatarMargin	EdgeInsetsGeometry?	Provides margin for the avatar component.
avatarPadding	EdgeInsetsGeometry?	Provides padding for the avatar component.
avatarWidth	double?	Provides width for the avatar component.
avatarHeight	double?	Provides height for the avatar component.
deleteConversationOptionVisibility	bool	Controls visibility of delete conversation option (default: true).
groupTypeVisibility	bool	Controls visibility of group type icon (default: true).
setOptions	Function?	Sets custom options for conversation long press actions.
addOptions	Function?	Adds additional options to conversation long press actions.
loadingStateView	WidgetBuilder?	Custom widget for loading state view.
leadingView	Function?	Custom widget for leading view of conversation items.
titleView	Function?	Custom widget for title view of conversation items.
controllerTag	String?	Tag for controller management.
onLoad	OnLoad< Conversation >?	Callback when conversations are loading.
onEmpty	OnEmpty?	Callback when conversation list is empty.
submitIcon	Widget?	Custom submit icon for selection mode.
dateTimeFormatterCallback	DateTimeFormatterCallback?	Callback for custom date and time formatting.

Renamed Properties

V4 Name	V5 Name	Type	Description
conversationsStyle	conversationsStyle	ConversationsStyle → CometChatConversationsStyle	Style configuration (type changed from ConversationsStyle to CometChatConversationsStyle).
tailView	trailingView	Function?	Custom widget for trailing view of conversation items (renamed from tailView to trailingView).
disableUsersPresence	usersStatusVisibility	bool	Controls user status visibility (inverted logic: disableUsersPresence=false becomes usersStatusVisibility=true).
hideReceipt/disableReceipt	receiptsVisibility	bool	Controls receipt visibility (inverted logic: hideReceipt=false becomes receiptsVisibility=true).

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the conversations component.
errorStateText	String?	Custom text for error state display.
emptyStateText	String?	Custom text for empty state display.
stateCallBack	Function?	Callback for state changes in the conversations component.
loadingStateText	String?	Custom text for loading state display.
options	Function?	Options configuration for conversation items.
avatarStyle	AvatarStyle?	Style configuration for avatar components.
statusIndicatorStyle	StatusIndicatorStyle?	Style configuration for status indicators.
badgeStyle	BadgeStyle?	Style configuration for badge components.
receiptStyle	ReceiptStyle?	Style configuration for receipt indicators.
hideSeparator	bool	Controls visibility of separators between conversation items.
dateStyle	DateStyle?	Style configuration for date components.
disableTyping	bool?	Controls typing indicator functionality.
deleteConversationDialogStyle	ConfirmDialogStyle?	Style configuration for delete conversation confirmation dialog.
disableMentions	bool?	Controls mention functionality in conversations.

Users

New Properties

Name	Type	Description
scrollController	ScrollController?	Sets controller for scrolling behavior in the users list.
height	double?	Provides height to the widget.
width	double?	Provides width to the widget.
stickyHeaderVisibility	bool	Hide alphabets used to separate users (default: false).
searchKeyword	String?	Used to set searchKeyword to fetch initial list with.
onLoad	OnLoad< User >?	Callback triggered when list is fetched and loaded.
onEmpty	OnEmpty?	Callback triggered when the list is empty.
setOptions	Function?	Sets list of actions available on the long press of list item.
addOptions	Function?	Adds into the current list of actions available on the long press of list item.
trailingView	Widget? Function(BuildContext, User)?	Custom widget for trailing view of each user item.
leadingView	Widget? Function(BuildContext, User)?	Custom widget for leading view of each user item.
titleView	Widget? Function(BuildContext, User)?	Custom widget for title view of each user item.

Renamed Properties

V4 Name	V5 Name	Type	Description
controller	scrollController	ScrollController?	Scroll controller for the list (renamed from controller to scrollController).
disableUsersPresence	usersStatusVisibility	bool → bool	Controls user status visibility (inverted logic: disableUsersPresence=false becomes usersStatusVisibility=true).
hideSectionSeparator	stickyHeaderVisibility	bool → bool	Controls section separator visibility (inverted logic: hideSectionSeparator=false becomes stickyHeaderVisibility=true).

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the users component.
errorStateText	String?	Custom text for error state display.
emptyStateText	String?	Custom text for empty state display.
stateCallBack	Function?	Callback to access controller functions from parent.
hideError	bool?	Toggle visibility of error dialog.
listItemStyle	ListItemStyle?	Style configuration for individual list items.
options	Function?	Options configuration for user items.
avatarStyle	AvatarStyle?	Style configuration for avatar components.
statusIndicatorStyle	StatusIndicatorStyle?	Style configuration for status indicators.
hideSeparator	bool?	Toggle visibility of separator between items.
hideSectionSeparator	bool?	Toggle visibility of section separators.
selectionIcon	Widget?	Custom selection icon widget.

Groups

New Properties

Name	Type	Description
scrollController	ScrollController?	Sets controller for scrolling behavior in the groups list.
height	double?	Provides height to the widget.
width	double?	Provides width to the widget.
searchKeyword	String?	Used to set searchKeyword to fetch initial list with.
onLoad	OnLoad< Group >?	Callback triggered when list is fetched and loaded.
onEmpty	OnEmpty?	Callback triggered when the list is empty.
groupTypeVisibility	bool	Hide the group type icon which is visible on the group icon (default: true).
setOptions	Function?	Sets list of actions available on the long press of list item.
addOptions	Function?	Adds into the current list of actions available on the long press of list item.
trailingView	Widget? Function(BuildContext, Group)?	Custom widget for trailing view of each group item.
leadingView	Widget? Function(BuildContext, Group)?	Custom widget for leading view of each group item.
titleView	Widget? Function(BuildContext, Group)?	Custom widget for title view of each group item.

Renamed Properties

V4 Name	V5 Name	Type	Description
controller	scrollController	ScrollController?	Scroll controller for the list (renamed from controller to scrollController).

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the groups component.
errorStateText	String?	Custom text for error state display.
emptyStateText	String?	Custom text for empty state display.
listItemStyle	ListItemStyle?	Style configuration for individual list items.
options	Function?	Options configuration for group items.
avatarStyle	AvatarStyle?	Style configuration for avatar components.
statusIndicatorStyle	StatusIndicatorStyle?	Style configuration for status indicators.
hideSeparator	bool	Toggle visibility of separator between items.
selectionIcon	Widget?	Custom selection icon widget.

Group Members

New Properties

Name	Type	Description
height	double?	Provides height to the widget.
width	double?	Provides width to the widget.
controllerTag	String?	Tag to access the widget’s GetXController.
searchKeyword	String?	Used to set searchKeyword to fetch initial list with.
onLoad	OnLoad< GroupMember >?	Callback triggered when list is fetched and loaded.
onEmpty	OnEmpty?	Callback triggered when the list is empty.
leadingView	Widget? Function(BuildContext, GroupMember)?	Custom widget for leading view of each group member item.
titleView	Widget? Function(BuildContext, GroupMember)?	Custom widget for title view of each group member item.
usersStatusVisibility	bool	Hide status indicator of user which is visible on user avatar (default: true).
hideKickMemberOption	bool?	Defines whether a member can be kicked or not.
hideBanMemberOption	bool?	Defines whether a member can be banned or not.
hideScopeChangeOption	bool?	Defines whether a member’s scope can be changed or not.
setOptions	Function?	Sets list of actions available on the long press of list item.
addOptions	Function?	Adds into the current list of actions available on the long press of list item.

Renamed Properties

V4 Name	V5 Name	Type	Description
groupMemberStyle	style	GroupMembersStyle → CometChatGroupMembersStyle	Style configuration (type changed from GroupMembersStyle to CometChatGroupMembersStyle).
tailView	trailingView	Function → Function	Custom widget for trailing view (renamed from tailView to trailingView).
disableUsersPresence	usersStatusVisibility	bool → bool	Controls user status visibility (inverted logic: disableUsersPresence=false becomes usersStatusVisibility=true).

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the group members component.
title	String?	Sets title for the list.
errorStateText	String?	Text to be displayed when error occurs.
emptyStateText	String?	Text to be displayed when the list is empty.
listItemStyle	ListItemStyle?	Style configuration for individual list items.
avatarStyle	AvatarStyle?	Style configuration for avatar components.
statusIndicatorStyle	StatusIndicatorStyle?	Style configuration for status indicator.
groupScopeStyle	GroupScopeStyle?	Styling properties for group scope (integrated into main style).

Message Header

New Properties

Name	Type	Description
trailingView	List< Widget >? Function(User?, Group?, BuildContext)?	Custom widgets for trailing view in the message header.
height	double?	Sets height for the message header component.
padding	EdgeInsetsGeometry?	Sets padding for the message header component.
hideVideoCallButton	bool?	Controls visibility of video call button in the header.
hideVoiceCallButton	bool?	Controls visibility of voice call button in the header.
titleView	Widget? Function(Group?, User?, BuildContext)?	Custom widget for title view in the message header.
leadingStateView	Widget? Function(Group?, User?, BuildContext)?	Custom widget for leading state view in the message header.
auxiliaryButtonView	Widget? Function(Group?, User?, BuildContext)?	Custom widget for auxiliary button view in the message header.
usersStatusVisibility	bool	Controls visibility of user status indicator (default: true).
dateTimeFormatterCallback	DateTimeFormatterCallback?	Callback for custom date and time formatting.

Renamed Properties

V4 Name	V5 Name	Type	Description
hideBackButton	showBackButton	bool → bool	Controls back button visibility (inverted logic: hideBackButton=false becomes showBackButton=true).
disableUserPresence	usersStatusVisibility	bool → bool	Controls user presence visibility (inverted logic: disableUserPresence=false becomes usersStatusVisibility=true).
appBarOptions	trailingView	Function → Function	Custom widgets for header options (renamed from appBarOptions to trailingView).

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the message header component.
avatarStyle	AvatarStyle?	Style configuration for avatar in the header.
statusIndicatorStyle	StatusIndicatorStyle?	Style configuration for status indicator in the header.
privateGroupIcon	Widget?	Custom icon for private groups in the header.
protectedGroupIcon	Widget?	Custom icon for protected groups in the header.
disableTyping	bool	Controls typing indicator functionality in the header.

Message List

New Properties

Name	Type	Description
style	CometChatMessageListStyle?	Sets style for message list (replaces messageListStyle).
receiptsVisibility	bool	Controls visibility of read receipts (default: true).
avatarVisibility	bool	Toggle visibility for avatar (default: true, renamed from showAvatar).
padding	EdgeInsetsGeometry?	Sets padding for the message list.
margin	EdgeInsetsGeometry?	Sets margin for the message list.
width	double?	Sets width for the message list.
height	double?	Sets height for the message list.
reactionsRequestBuilder	ReactionsRequestBuilder?	Used to fetch the reactions of a particular message.
onLoad	OnLoad< BaseMessage >?	Callback triggered when list is fetched and loaded.
onEmpty	OnEmpty?	Callback triggered when the list is empty.
onReactionClick	Function(String?, BaseMessage)?	Override the click of a reaction pill.
onReactionLongPress	Function(String?, BaseMessage)?	Override when user long presses on a reaction pill.
onReactionListItemClick	Function(String?, BaseMessage?)?	Override when a reaction list item is clicked.
hideStickyDate	bool	Hide the sticky date separator.
hideReplyInThreadOption	bool	Defines whether Reply In Thread option should be visible.
hideTranslateMessageOption	bool	Defines whether Translate Message option should be visible.
hideEditMessageOption	bool	Defines whether Edit Message option should be visible.
hideDeleteMessageOption	bool	Defines whether Delete Message option should be visible.
hideReactionOption	bool	Defines whether Reaction option should be visible.
hideMessagePrivatelyOption	bool	Defines whether Message Privately option should be visible.
hideCopyMessageOption	bool	Defines whether Copy Message option should be visible.
hideMessageInfoOption	bool	Defines whether Message Info option should be visible.
hideGroupActionMessages	bool	Defines whether action messages in groups should be visible.
enableConversationStarters	bool	Controls conversation starter generation in new conversations.
enableSmartReplies	bool	Controls smart replies generation in chat.
hideShareMessageOption	bool	Defines whether Share Message option should be visible.
smartRepliesDelayDuration	int	Milliseconds delay after which Smart Replies are triggered.
smartRepliesKeywords	List< String >	Keywords that trigger Smart Replies.
addTemplate	List< CometChatMessageTemplate >?	Add custom message templates to existing templates.
dateTimeFormatterCallback	DateTimeFormatterCallback?	Callback for custom date and time formatting.
hideModerationView	bool	Defines whether moderation view should be hidden.
hideDateSeparator	bool	Hide the date separator (default: false).

Renamed Properties

V4 Name	V5 Name	Type	Description
messageListStyle	style	MessageListStyle → CometChatMessageListStyle	Style configuration (type changed).
controller	scrollController	ScrollController?	Scroll controller for the list.
showAvatar	avatarVisibility	bool → bool	Toggle visibility for avatar.
disableReceipt/hideReceipt	receiptsVisibility	bool → bool	Controls receipt visibility (inverted logic).
addReactionIconTap	addMoreReactionTap	Function → Function	Callback for adding more reactions.
dateSeparatorPattern	dateSeparatorPattern	Function(DateTime) → Function(DateTime)	Signature clarified with parameter name.

Removed Properties

Name	Type	Description
hideError	bool?	Toggle visibility of error dialog.
theme	CometChatTheme?	Theme configuration for the message list.
avatarStyle	AvatarStyle?	Style configuration for avatar (integrated into main style).
scrollToBottomOnNewMessages	bool?	Auto-scroll to bottom on new messages.
newMessageIndicatorText	String?	Custom text for new message indicator.
timestampAlignment	TimeAlignment	Alignment for message timestamps.
messageInformationConfiguration	MessageInformationConfiguration?	Configuration for message information.
reactionListConfiguration	ReactionListConfiguration?	Configuration for reaction list.
reactionsConfiguration	ReactionsConfiguration?	Configuration for reactions.
reactionsStyle	ReactionsStyle?	Style configuration for reactions.
emojiKeyboardStyle	EmojiKeyboardStyle?	Style configuration for emoji keyboard.
disableReceipt	bool?	(Deprecated) Controls visibility of read receipts.
hideReceipt	bool?	Controls visibility of read receipts (replaced by receiptsVisibility).

Message Composer

New Properties

Name	Type	Description
padding	EdgeInsetsGeometry?	Provides padding to the message composer.
messageInputPadding	EdgeInsetsGeometry?	Sets the padding to the message input field.
recorderStartButtonIcon	Widget?	Defines the icon of the start button for voice recording.
recorderPauseButtonIcon	Widget?	Defines the icon of the pause button for voice recording.
recorderDeleteButtonIcon	Widget?	Defines the icon of the delete button for voice recording.
recorderStopButtonIcon	Widget?	Defines the icon of the stop button for voice recording.
recorderSendButtonIcon	Widget?	Defines the icon of the send button for voice recording.
hideSendButton	bool?	Controls visibility of send button.
hideAttachmentButton	bool?	Controls visibility of attachment button.
hideStickersButton	bool?	Controls visibility of sticker button.
hideImageAttachmentOption	bool?	Controls visibility of image attachment option.
hideVideoAttachmentOption	bool?	Controls visibility of video attachment option.
hideAudioAttachmentOption	bool?	Controls visibility of audio attachment option.
hideFileAttachmentOption	bool?	Controls visibility of file attachment option.
hidePollsOption	bool?	Controls visibility of poll option.
hideCollaborativeDocumentOption	bool?	Controls visibility of collaborative document option.
hideCollaborativeWhiteboardOption	bool?	Controls visibility of collaborative whiteboard option.
hideTakePhotoOption	bool?	Controls visibility of take photo option.
sendButtonIcon	Widget?	Custom send button icon.

Renamed Properties

V4 Name	V5 Name	Type	Description
hideVoiceRecording	hideVoiceRecordingButton	bool? → bool?	Renamed for clarity (hideVoiceRecording to hideVoiceRecordingButton).

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the message composer.
hideLiveReaction	bool	Controls live reaction functionality (feature removed).
liveReactionIcon	Widget?	Custom live reaction icon (feature removed).
liveReactionIconURL	String?	Path for live reaction icon (feature removed).
recordIcon	Widget?	Icon for recording start (replaced by recorderStartButtonIcon).
playIcon	Widget?	Icon for playing recording (integrated into recorder).
deleteIcon	Widget?	Icon for deleting recording (replaced by recorderDeleteButtonIcon).
stopIcon	Widget?	Icon for stopping recording (replaced by recorderStopButtonIcon).
submitIcon	Widget?	Icon for submitting recording (replaced by recorderSendButtonIcon).
pauseIcon	Widget?	Icon for pausing recording (replaced by recorderPauseButtonIcon).
mediaRecorderStyle	MediaRecorderStyle?	Style for media recorder (integrated into main style).

Incoming Call

New Properties

Name	Type	Description
callSettingsBuilder	CallSettingsBuilder?	Used to set the call settings for the incoming call.
height	double?	Sets the height of the incoming call widget.
width	double?	Sets the width of the incoming call widget.
callIcon	Widget?	Custom call icon for the incoming call display.
titleView	Widget? Function(BuildContext, Call)?	Custom widget for title view in the incoming call.
subTitleView	Widget? Function(BuildContext, Call)?	Custom widget for subtitle view in the incoming call.
leadingView	Widget? Function(BuildContext, Call)?	Custom widget for leading view in the incoming call.
itemView	Widget? Function(BuildContext, Call)?	Custom widget for complete item view in the incoming call.
trailingView	Widget? Function(BuildContext, Call)?	Custom widget for trailing view in the incoming call.

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the incoming call component.
subtitle	String?	Custom subtitle text (replaced by subTitleView function).
declineButtonIconUrl	String?	Custom decline button icon URL.
declineButtonIconUrlPackage	String?	Package name for decline button icon.
cardStyle	CardStyle?	Style configuration for the card layout.
declineButtonStyle	ButtonStyle?	Style configuration for decline button.
acceptButtonIconUrl	String?	Custom accept button icon URL.
acceptButtonIconUrlPackage	String?	Package name for accept button icon.
acceptButtonStyle	ButtonStyle?	Style configuration for accept button.
avatarStyle	AvatarStyle?	Style configuration for avatar (integrated into main style).
ongoingCallConfiguration	OngoingCallConfiguration?	Configuration for ongoing call settings.

Outgoing Call

New Properties

Name	Type	Description
callSettingsBuilder	CallSettingsBuilder?	Used to set the call settings for the outgoing call.
height	double?	Sets the height of the outgoing call widget.
width	double?	Sets the width of the outgoing call widget.
avatarView	Widget? Function(BuildContext, Call)?	Custom widget for avatar view in the outgoing call.
titleView	Widget? Function(BuildContext, Call)?	Custom widget for title view in the outgoing call.
cancelledView	Widget? Function(BuildContext, Call)?	Custom widget for cancelled/decline button view in the outgoing call.

Renamed Properties

V4 Name	V5 Name	Type	Description
subtitle	subtitleView	String? → Widget? Function(BuildContext, Call)?	Subtitle changed from static text to custom widget function.
declineButtonIconUrl	declineButtonIcon	String? → Widget?	Decline button icon changed from URL-based to Widget-based.
onDecline	onCancelled	Function(BuildContext, Call)? → Function(BuildContext, Call)?	Callback renamed from onDecline to onCancelled for clarity.

Removed Properties

Name	Type	Description
theme	CometChatTheme?	Theme configuration for the outgoing call component.
subtitle	String?	Custom subtitle text (replaced by subtitleView function).
declineButtonText	String?	Custom decline button text.
declineButtonIconUrl	String?	Custom decline button icon URL (replaced by declineButtonIcon widget).
declineButtonIconUrlPackage	String?	Package name for decline button icon.
cardStyle	CardStyle?	Style configuration for the card layout.
buttonStyle	ButtonStyle?	Style configuration for decline button.
avatarStyle	AvatarStyle?	Style configuration for avatar (integrated into main style).
ongoingCallConfiguration	OngoingCallConfiguration?	Configuration for ongoing call settings.

Call Buttons

New Properties

Name	Type	Description
callSettingsBuilder	CallSettingsBuilder Function(User?, Group?, bool?)?	Used to configure the meet settings builder for call initialization.

Renamed Properties

V4 Name	V5 Name	Type	Description
hideVoiceCall	hideVoiceCallButton	bool? → bool?	Renamed for clarity (hideVoiceCall to hideVoiceCallButton).
hideVideoCall	hideVideoCallButton	bool? → bool?	Renamed for clarity (hideVideoCall to hideVideoCallButton).

Removed Properties

Name	Type	Description
voiceCallIconText	String?	Text label for the voice call icon.
voiceCallIconHoverText	String?	Hover text for the voice call icon.
videoCallIconText	String?	Text label for the video call icon.
videoCallIconHoverText	String?	Hover text for the video call icon.
onVoiceCallClick	Function(BuildContext, User?, Group?)?	Custom callback for voice call button click.
onVideoCallClick	Function(BuildContext, User?, Group?)?	Custom callback for video call button click.
ongoingCallConfiguration	OngoingCallConfiguration?	Configuration for ongoing call settings.

Call Logs

New Properties

Name	Type	Description
hideAppbar	bool	Toggle visibility for app bar (default: false).
appBarOptions	List< Widget >?	List of options to be visible in app bar.
onCallLogIconClicked	Function(CallLog)?	Callback triggered on clicking of the call log icon (audio/video icon).
onItemLongPress	Function(CallLog)?	Callback triggered on long pressing of the call log item.
onLoad	OnLoad< CallLog >?	Callback triggered when list is fetched and loaded.
onEmpty	OnEmpty?	Callback triggered when the list is empty.
setOptions	Function?	Sets list of actions available on the long press of list item.
addOptions	Function?	Adds into the current list of actions available on the long press of list item.
leadingStateView	Widget? Function(BuildContext, CallLog)?	Custom widget for leading view of each call log item.
titleView	Widget? Function(BuildContext, CallLog)?	Custom widget for title view of each call log item.
audioCallIcon	Widget?	Custom audio call icon.
videoCallIcon	Widget?	Custom video call icon.
incomingCallIcon	Widget?	Custom incoming call icon.
outgoingCallIcon	Widget?	Custom outgoing call icon.
missedCallIcon	Widget?	Custom missed call icon.

Renamed Properties

V4 Name	V5 Name	Type	Description
tailView	trailingView	Function → Function	Custom widget for trailing view (renamed from tailView to trailingView).

Removed Properties

Name	Type	Description
title	String?	Title of the call log list component.
emptyStateText	String?	Text to be displayed when the state is empty.
errorStateText	String?	Text to be displayed when error occurs.
loadingIconUrl	String?	URL to be displayed when loading.
avatarStyle	AvatarStyle?	Style configuration for avatar (integrated into main style).
theme	CometChatTheme?	Theme configuration for the call logs component.
hideSeparator	bool?	Toggle visibility of separator.
onInfoIconClick	Function(CallLog)?	Callback triggered on clicking of the info icon.
infoIconUrl	String?	Custom info icon URL.
listItemStyle	ListItemStyle?	Style configuration for individual list items.
incomingAudioCallIcon	String?	Custom incoming audio call icon URL (replaced by incomingCallIcon widget).
incomingVideoCallIcon	String?	Custom incoming video call icon URL (replaced by incomingCallIcon widget).
outgoingAudioCallIcon	String?	Custom outgoing audio call icon URL (replaced by outgoingCallIcon widget).
outgoingVideoCallIcon	String?	Custom outgoing video call icon URL (replaced by outgoingCallIcon widget).
missedAudioCallIcon	String?	Custom missed audio call icon URL (replaced by missedCallIcon widget).
missedVideoCallIcon	String?	Custom missed video call icon URL (replaced by missedCallIcon widget).