> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.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-feature-card-builder/tKDtB3xjE6jATqmt/images/061fb439-outgoing_call-3f3bfded62daa83d53c24081b12f4d20.png?fit=max&auto=format&n=tKDtB3xjE6jATqmt&q=85&s=e0c8ad62ffec7a2aa71e231cd570cd8c" 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-feature-card-builder/cEj5TXvU_reIGZbk/images/1ee27af8-outgoing_call_functionality_cometchat_screens-f0d6a773e40e452b68aa7c9b32462428.png?fit=max&auto=format&n=cEj5TXvU_reIGZbk&q=85&s=09459cfa9ce9e84605d55163748d5048" alt="Image" width="4498" height="3121" data-path="images/1ee27af8-outgoing_call_functionality_cometchat_screens-f0d6a773e40e452b68aa7c9b32462428.png" />

<img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/Vsd_l5VyiAINqcQj/images/78c18207-outgoing_call_functionality_cometchat_screens-62cac4f18b60221eab40245dc29ea2b0.png?fit=max&auto=format&n=Vsd_l5VyiAINqcQj&q=85&s=8784683258ca2e72faaf6196228ee4bb" 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-feature-card-builder/wEJh-uJMkapAxmr_/images/f6c6dd58-outgoing_call_styling-53873b73da0ff530f8199d30bd2eccd2.png?fit=max&auto=format&n=wEJh-uJMkapAxmr_&q=85&s=5bece0cddee3f8ac238a97e63ad46384" 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>