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

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
    ```
  </Tab>
</Tabs>

***

## Quick Start

### Automatic (Recommended)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MaterialApp(navigatorKey: CallNavigationContext.navigatorKey, home: YourHomeScreen())
    ```
  </Tab>
</Tabs>

### Manual Launch

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

Prerequisites: CometChat SDK initialized, Calls UIKit added, `callingExtension` set. See [Call Features](/ui-kit/flutter/call-features).

***

## Actions

#### `onAccept`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatIncomingCall(user: user, call: callObject,
      onAccept: (BuildContext context, Call call) { /* Custom accept */ },
    )
    ```
  </Tab>
</Tabs>

#### `onDecline`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatIncomingCall(user: user, call: callObject,
      onDecline: (BuildContext context, Call call) { /* Custom decline */ },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

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

***

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatIncomingCall(user: user, call: callObject,
      itemView: (context, call) { return Container(); },
    )
    ```
  </Tab>
</Tabs>

### Leading View

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

### Title View

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

### Subtitle View

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

### Trailing View

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

***

## Style

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

| 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

<CardGroup cols={2}>
  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/flutter/outgoing-call">Manage outgoing calls</Card>
  <Card title="Call Buttons" icon="phone" href="/ui-kit/flutter/call-buttons">Add 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">Styling reference</Card>
</CardGroup>