Skip to main content

Call Bubble

CometChatCallBubble is a widget that displays the call information and a button to join a direct call.

If CometChatMessages has been launched for a Group only the video call button will be present in the CometChatMessageHeader, pressing on which shall navigate the user to the CometChatOngoingCall Widget and a CustomMessage will be sent in the background with details for other group members to join the call, this CustomMessage will be displayed on the CometChatMessageList using this CometChatCallBubble.

Usage

CometChatCallBubble can be used as a child Widget for a Container or SizedBox or along with other children Widgets in a Row or Column.

CometChatCallBubble(
icon: Icon(Icons.call),
title: 'Call',
buttonText: 'Call',
onTap: (context) {
// TODO("Not yet implemented")
},
callBubbleStyle: CallBubbleStyle(
background: Colors.blue,
),
theme: cometChatTheme,
alignment: BubbleAlignment.left,
);

Properties

PropertyTypeDescription
iconWidgeticon to show in the leading view of the bubble
titleStringthe title to be displayed
buttonTextStringthe text to be displayed on the button
onTapFunction(BuildContext)onTap can be used to execute some tasks by tapping the button
callBubbleStyleCallBubbleStylea CallBubbleStyle object will be used to customize the appearance of the widget
alignmentBubbleAlignmentalignment will be used to align the widget to determine the appropriate background color and text color
themeCometChatThemeused to set custom theme

callBubbleStyle

A CallBubbleStyle object will be used to customize the appearance of the widget

PropertyTypeDescription
titleStyleTextStylesets the style for the text shown in the title of the CometChatCallBubble
subtitleStyleTextStylesets the style for the text shown in the subtitle of the CometChatCallBubble
buttonTextStyleTextStylesets the style for the text shown on the button of the CometChatCallBubble
buttonBackgroundColorsets the color of the join call button of the call bubble
iconTintColorsets the color for the icon shown in the leading view of the CometChatCallBubble
backgroundColorsets the background color of the CometChatCallBubble
widthdoubleused to set width
heightdoubleused to set height
gradientGradientused to set a gradient background
borderBoxBorderused to set border
borderRadiusdoubleused to set corner radius
// Create a CallBubbleStyle object 
CallBubbleStyle callBubbleStyle = CallBubbleStyle(
background: Colors.blue,
iconTint: Colors.grey,
titleStyle: TextStyle(
color: Colors.red,
fontSize: 16,
fontWeight: FontWeight.bold,
),
subtitleStyle: TextStyle(
color: Colors.red,
fontSize: 14,
fontWeight: FontWeight.bold,
),
buttonTextStyle: TextStyle(
color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold
),
);

// Pass the CallBubbleStyle object to CometChatCallBubble
CometChatCallBubble(
callBubbleStyle: callBubbleStyle,
);