> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatIncomingCall` |
  | Package | `cometchat_chat_uikit` |
  | Import | `import 'package:cometchat_chat_uikit/cometchat_calls_uikit.dart';` |
  | Barrel | **Calls barrel only** — this widget does not resolve from `cometchat_chat_uikit.dart`. A screen showing chat *and* calling imports both. |
  | Purpose | Handle incoming CometChat Flutter UI Kit audio and video calls with full-screen caller info, accept, reject, and navigation setup. |
  | Data props | `call` · `user` |
  | Actions | `onError` · `onDecline` · `onAccept` |
  | View slots | `callSettingsBuilder` · `titleView` · `subTitleView` · `leadingView` · `itemView` · `trailingView` — [details](#custom-view-slots) |
  | Styling | `incomingCallStyle` — the app `ThemeData` does not reach inside a kit widget, so scope colours here. |
  | Prerequisites | `CometChatUIKit` initialised and a user logged in. |
  | Full props | [21 props](#functionality) |
</Accordion>

`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"); },
    )
    ```
  </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 == CometChatCallType.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.