How to Use Flutter Callkit Incoming for Your Flutter App

If you’re looking to integrate an incoming call feature into your Flutter application, you’ve come to the right place! The Flutter Callkit Incoming plugin provides a seamless experience for both Android and iOS, allowing you to show incoming calls with custom UIs. In this guide, we’ll walk through the installation process, usage, and troubleshooting tips to help you get started.

What You Need to Know Before Getting Started

• This plugin works only on real devices for iOS, not on simulators due to framework limitations.
• Ensure you have Flutter installed on your machine and the environment set up for both iOS and Android development.

Installation Steps

Step 1: Install the Package

Begin by adding the Flutter Callkit Incoming plugin to your Flutter project. Open your terminal and run:

flutter pub add flutter_callkit_incoming

Step 2: Configure Your Project

For Android

Edit your AndroidManifest.xml file by adding the following permissions and activity settings:

   
       ...
   

Also, in your proguard-rules.pro file, add:

-keep class com.hiennv.flutter_callkit_incoming.**  *;

For iOS

Edit your Info.plist file to include:

UIBackgroundModes

    voip
    remote-notification

Usage Instructions

Here’s how you can show an incoming call using the Flutter Callkit Incoming plugin:

1. Import the Package

import 'package:flutter_callkit_incoming/flutter_callkit_incoming.dart';

2. Show Incoming Call

When you receive a call, you can utilize the following code to display the incoming call UI:

this._currentUuid = _uuid.v4();
CallKitParams callKitParams = CallKitParams(
    id: _currentUuid,
    nameCaller: "Hien Nguyen",
    appName: "Callkit",
    avatar: "https://i.pravatar.cc/100",
    handle: "0123456789",
    type: 0,
    // additional parameters...
);
await FlutterCallkitIncoming.showCallkitIncoming(callKitParams);

Understanding the Code: An Analogy

Think of your application as a party where guests are constantly coming in and out. Each time you receive a call, it’s like getting a guest arriving at your party. The CallKitParams act as the invitation card, containing essential information like who the guest is (nameCaller), what they look like (avatar), and how they can be identified (handle).

Just like you need to prepare a spot for them to make themselves comfortable (the UI), the plugin sets up the call interface using the provided details. Once you’re ready, you send out the invitation (showing the call) and wait for the guest to respond (the call to be accepted or declined).

Troubleshooting

If you encounter any issues while using the plugin, here are a few troubleshooting ideas:

• Ensure your permissions are correctly set for both Android and iOS platforms.
• If the incoming call UI does not show, try testing on a real device, especially for iOS.
• Check console logs for any runtime exceptions or errors; they often provide hints on what went wrong.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

By following these steps, you should now be equipped to set up incoming calls in your Flutter application using the Flutter Callkit Incoming plugin. As you dive deeper into functionality and features, you’ll find that this plugin is powerful for enhancing your app’s communication capabilities.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.