Outgoing Call

Full-screen view displaying recipient information and call status during an outgoing call, with automatic transition to the ongoing call screen.

CometChatOutgoingCall manages the outgoing call process. It displays recipient information (avatar, name) and call status, and automatically transitions to the ongoing call screen when the receiver accepts.

---

Where It Fits

CometChatOutgoingCall is typically launched automatically by CometChatCallButtons when a call is initiated. It can also be launched manually for custom call flows.

---

Quick Start

Automatic (via CallButtons)

When using CometChatCallButtons, the outgoing call screen is launched automatically when the user taps a call button. No manual integration needed.

Manual Launch

For custom call flows:

Dart

Navigator.push(context, MaterialPageRoute(
  builder: (context) => CometChatOutgoingCall(
    user: user,
    call: callObject,
  ),
));

Dart

import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';
import 'package:flutter/material.dart';

class OutgoingCallExample extends StatefulWidget {
  const OutgoingCallExample({super.key});

  @override
  State<OutgoingCallExample> createState() => _OutgoingCallExampleState();
}

class _OutgoingCallExampleState extends State<OutgoingCallExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CometChatOutgoingCall(
          user: user,
          call: callObject,
        ),
      ),
    );
  }
}

Prerequisites: CometChat SDK initialized, enableCalls = true set in UIKitSettings. See Call Features for setup.

---

Actions and Events

Callback Methods

onCancelled

Fires when the user cancels the outgoing call. Override to customize cancel behavior.

Dart

CometChatOutgoingCall(
  user: user,
  call: callObject,
  onCancelled: (BuildContext context, Call call) {
    // Custom cancel logic
  },
)

onError

Fires on internal errors.

Dart

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

Global Events

The component emits events via CometChatCallEvents:

Event	Description
ccCallAccepted	Triggers when the outgoing call is accepted
ccCallRejected	Triggers when the outgoing call is rejected

Dart

class _YourScreenState extends State<YourScreen> with CometChatCallEventListener {
  @override
  void initState() {
    super.initState();
    CometChatCallEvents.addCallEventsListener("unique_listener_ID", this);
  }

  @override
  void dispose() {
    super.dispose();
    CometChatCallEvents.removeCallEventsListener("unique_listener_ID");
  }

  @override
  void ccCallAccepted(Call call) {
    debugPrint("Call accepted: ${call.sessionId}");
  }

  @override
  void ccCallRejected(Call call) {
    debugPrint("Call rejected: ${call.sessionId}");
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

---

Functionality

Property	Type	Default	Description
user	User?	null	Recipient user object
call	Call	required	Call object with session details
callSettingsBuilder	CallSettingsBuilder?	null	Configure call settings
height	double?	null	Widget height
width	double?	null	Widget width
declineButtonIcon	Widget?	null	Custom decline/cancel button icon
declineButtonText	String?	null	Custom decline button text
disableSoundForCalls	bool?	false	Disable outgoing call sound
customSoundForCalls	String?	null	Custom sound asset path

Example — custom decline text and disabled sound:

Dart

CometChatOutgoingCall(
  user: user,
  call: callObject,
  disableSoundForCalls: true,
  declineButtonText: "Cancel Call",
)

---

Custom View Slots

Avatar View

Replace the recipient’s avatar.

Dart

CometChatOutgoingCall(
  user: user,
  call: callObject,
  avatarView: (context, call) {
    return CircleAvatar(
      radius: 50,
      backgroundImage: NetworkImage(user?.avatar ?? ""),
    );
  },
)

Title View

Replace the recipient’s name / call status text.

Dart

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

Subtitle View

Replace the subtitle (e.g., “Calling…”).

Dart

CometChatOutgoingCall(
  user: user,
  call: callObject,
  subtitleView: (context, call) {
    return Text(
      "Ringing...",
      style: TextStyle(fontSize: 14, color: Colors.white70),
    );
  },
)

Cancelled View

Replace the cancel/end call button.

Dart

CometChatOutgoingCall(
  user: user,
  call: callObject,
  cancelledView: (context, call) {
    return ElevatedButton.icon(
      onPressed: () {
        // Cancel call
      },
      icon: Icon(Icons.call_end),
      label: Text("End Call"),
      style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
    );
  },
)

---

Style

Dart

CometChatOutgoingCall(
  user: user,
  call: callObject,
  outgoingCallStyle: CometChatOutgoingCallStyle(
    avatarStyle: CometChatAvatarStyle(
      backgroundColor: Color(0xFFFBAA75),
      borderRadius: BorderRadius.circular(8),
    ),
    declineButtonColor: Color(0xFFF44649),
    declineButtonBorderRadius: BorderRadius.circular(12),
  ),
)

Style Properties

Property	Description
avatarStyle	Recipient avatar appearance
declineButtonColor	Cancel button background color
declineButtonBorderRadius	Cancel button corner radius
backgroundColor	Screen background color

---

Key V6 Differences

Aspect	V5	V6
Subtitle	Static String?	Dynamic subtitleView: Widget? Function(BuildContext, Call)?
Decline callback	onDecline	Renamed to onCancelled
Decline icon	URL-based String?	Widget-based declineButtonIcon: Widget?
State management	GetX controller	BLoC (OutgoingCallBloc)
Removed	theme, avatarStyle, cardStyle, buttonStyle, ongoingCallConfiguration	Integrated into main style

---

Next Steps

Incoming Call

Handle incoming calls

Call Buttons

Add voice and video call buttons

Call Features

Complete calling setup

Component Styling

Detailed styling reference