> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/061fb439-outgoing_call-3f3bfded62daa83d53c24081b12f4d20.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=6be550353780defa2ead7766616264ff" width="2560" height="1600" data-path="images/061fb439-outgoing_call-3f3bfded62daa83d53c24081b12f4d20.png" />
</Frame>

***

## 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:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => CometChatOutgoingCall(
        user: user,
        call: callObject,
      ),
    ));
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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,
            ),
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

Prerequisites: CometChat SDK initialized, `enableCalls = true` set in UIKitSettings. See [Call Features](/ui-kit/flutter/call-features) for setup.

***

## Actions and Events

### Callback Methods

#### `onCancelled`

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      onCancelled: (BuildContext context, Call call) {
        // Custom cancel logic
      },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

Fires on internal errors.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      onError: (e) {
        debugPrint("Error: ${e.message}");
      },
    )
    ```
  </Tab>
</Tabs>

### 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 |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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();
      }
    }
    ```
  </Tab>
</Tabs>

***

## 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:**

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      disableSoundForCalls: true,
      declineButtonText: "Cancel Call",
    )
    ```
  </Tab>
</Tabs>

<img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1ee27af8-outgoing_call_functionality_cometchat_screens-f0d6a773e40e452b68aa7c9b32462428.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=4e24f73e4c2498537a38c965058024c8" alt="Image" width="4498" height="3121" data-path="images/1ee27af8-outgoing_call_functionality_cometchat_screens-f0d6a773e40e452b68aa7c9b32462428.png" />

<img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/78c18207-outgoing_call_functionality_cometchat_screens-62cac4f18b60221eab40245dc29ea2b0.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=283e9ed884045f9cfd24570a12747780" alt="Image" width="4498" height="3121" data-path="images/78c18207-outgoing_call_functionality_cometchat_screens-62cac4f18b60221eab40245dc29ea2b0.png" />

***

## Custom View Slots

### Avatar View

Replace the recipient's avatar.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      avatarView: (context, call) {
        return CircleAvatar(
          radius: 50,
          backgroundImage: NetworkImage(user?.avatar ?? ""),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Title View

Replace the recipient's name / call status text.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      titleView: (context, call) {
        return Text(
          call.receiver?.name ?? "Unknown",
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Subtitle View

Replace the subtitle (e.g., "Calling...").

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      subtitleView: (context, call) {
        return Text(
          "Ringing...",
          style: TextStyle(fontSize: 14, color: Colors.white70),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Cancelled View

Replace the cancel/end call button.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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),
        );
      },
    )
    ```
  </Tab>
</Tabs>

***

## Style

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatOutgoingCall(
      user: user,
      call: callObject,
      outgoingCallStyle: CometChatOutgoingCallStyle(
        avatarStyle: CometChatAvatarStyle(
          backgroundColor: Color(0xFFFBAA75),
          borderRadius: BorderRadius.circular(8),
        ),
        declineButtonColor: Color(0xFFF44649),
        declineButtonBorderRadius: BorderRadius.circular(12),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f6c6dd58-outgoing_call_styling-53873b73da0ff530f8199d30bd2eccd2.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=7c4e8d6cc689f812e925acccbeb38bcf" width="2560" height="1600" data-path="images/f6c6dd58-outgoing_call_styling-53873b73da0ff530f8199d30bd2eccd2.png" />
</Frame>

### 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

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-volume" href="/ui-kit/flutter/incoming-call">
    Handle incoming calls
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/flutter/call-buttons">
    Add voice and video call buttons
  </Card>

  <Card title="Call Features" icon="video" href="/ui-kit/flutter/call-features">
    Complete calling setup
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/flutter/component-styling">
    Detailed styling reference
  </Card>
</CardGroup>