Incoming Call

Handle incoming CometChat Flutter UI Kit audio and video calls with full-screen caller info, accept, reject, and navigation setup.

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.

Dart

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

---

Quick Start

Automatic (Recommended)

Dart

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

Manual Launch

Dart

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

Dart

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

onDecline

Dart

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

onError

Dart

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

---

Functionality

Property	Type	Description
user	User?	Caller user object
call	Call	Call object (required)
callSettingsBuilder	CallSettingsBuilder?	Configure call settings
height / width	double?	Widget dimensions
callIcon	Widget?	Custom call type icon
acceptButtonText	String?	Custom accept button text
declineButtonText	String?	Custom decline button text
disableSoundForCalls	bool?	Disable incoming call sound
customSoundForCalls	String?	Custom sound asset path

---

Custom View Slots

Item View

Dart

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

Leading View

Dart

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

Title View

Dart

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

Dart

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

Dart

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

Dart

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),
  ),
)

Property	Description
backgroundColor	Background color
avatarStyle	Caller avatar appearance
acceptButtonColor	Accept button background
declineButtonColor	Decline button background
declineTextColor	Decline button text color
callIconColor	Call type icon color

---

Key V6 Differences

Aspect	V5	V6
Subtitle	Static String?	Dynamic Widget? Function(BuildContext, Call)?
Decline icon	URL-based String?	Widget-based
Custom views	Limited	Full titleView, subTitleView, leadingView, trailingView, itemView
State management	GetX controller	BLoC (IncomingCallBloc)
Removed	theme, avatarStyle, cardStyle, ongoingCallConfiguration	Integrated into main style

---

Next Steps

Outgoing Call

Manage outgoing calls

Call Buttons

Add call buttons

Call Features

Complete calling setup

Component Styling

Styling reference