Skip to main content
CometChatIncomingCall displays a full-screen overlay when an incoming call is received, showing caller info with accept and reject buttons.

Where It Fits

Typically triggered automatically when CallNavigationContext.navigatorKey is set in your MaterialApp.
MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())

Quick Start

MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())

Manual Launch

Navigator.push(context, MaterialPageRoute(
  builder: (context) => CometChatIncomingCall(user: user, call: callObject),
));
Prerequisites: CometChat SDK initialized, Calls UIKit added, callingExtension set. See Call Features.

Actions

onAccept

CometChatIncomingCall(user: user, call: callObject,
  onAccept: (BuildContext context, Call call) { /* Custom accept */ },
)

onDecline

CometChatIncomingCall(user: user, call: callObject,
  onDecline: (BuildContext context, Call call) { /* Custom decline */ },
)

onError

CometChatIncomingCall(user: user, call: callObject,
  onError: (e) { debugPrint("Error: ${e.message}"); },
)

Functionality

PropertyTypeDescription
userUser?Caller user object
callCallCall object (required)
callSettingsBuilderCallSettingsBuilder?Configure call settings
height / widthdouble?Widget dimensions
callIconWidget?Custom call type icon
acceptButtonTextString?Custom accept button text
declineButtonTextString?Custom decline button text
disableSoundForCallsbool?Disable incoming call sound
customSoundForCallsString?Custom sound asset path

Custom View Slots

Item View

CometChatIncomingCall(user: user, call: callObject,
  itemView: (context, call) { return Container(); },
)

Leading View

CometChatIncomingCall(user: user, call: callObject,
  leadingView: (context, call) {
    return CircleAvatar(radius: 40, backgroundImage: NetworkImage(call.sender?.avatar ?? ""));
  },
)

Title View

CometChatIncomingCall(user: user, call: callObject,
  titleView: (context, call) {
    return Text(call.sender?.name ?? "Unknown",
      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
  },
)

Subtitle View

CometChatIncomingCall(user: user, call: callObject,
  subTitleView: (context, call) {
    final type = call.type == CometChatConstants.CALL_TYPE_VIDEO ? "Video" : "Audio";
    return Text("Incoming $type Call", style: TextStyle(fontSize: 14, color: Colors.white70));
  },
)

Trailing View

CometChatIncomingCall(user: user, call: callObject,
  trailingView: (context, call) {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
      ElevatedButton(onPressed: () {}, child: Text("Reject"),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.red)),
      ElevatedButton(onPressed: () {}, child: Text("Accept"),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.green)),
    ]);
  },
)

Style

CometChatIncomingCall(user: user, call: callObject,
  incomingCallStyle: CometChatIncomingCallStyle(
    backgroundColor: Color(0xFFEDEAFA),
    avatarStyle: CometChatAvatarStyle(backgroundColor: Color(0xFFAA9EE8), borderRadius: BorderRadius.circular(7.5)),
    acceptButtonColor: Color(0xFF6852D6),
    declineButtonColor: Colors.white,
    declineTextColor: Color(0xFFF44649),
    callIconColor: Color(0xFF6852D6),
  ),
)
PropertyDescription
backgroundColorBackground color
avatarStyleCaller avatar appearance
acceptButtonColorAccept button background
declineButtonColorDecline button background
declineTextColorDecline button text color
callIconColorCall type icon color

Key V6 Differences

AspectV5V6
SubtitleStatic String?Dynamic Widget? Function(BuildContext, Call)?
Decline iconURL-based String?Widget-based
Custom viewsLimitedFull titleView, subTitleView, leadingView, trailingView, itemView
State managementGetX controllerBLoC (IncomingCallBloc)
Removedtheme, avatarStyle, cardStyle, ongoingCallConfigurationIntegrated into main style

Next Steps

Outgoing Call

Manage outgoing calls

Call Buttons

Add call buttons

Call Features

Complete calling setup

Component Styling

Styling reference