How to show a custom Incoming Call Screen like Whatsapp, Telegram etc.

[imariman]

I want to show a custom Incoming Call Screen instead system's default Incoming Call Screen. Is it possible with this package? I would appreciate if anyone can help me about how to do that? Thanks.

Example Picture (Left Picture): http://www.filmytales.com/wp-content/uploads/2020/04/1587834231telegram-group-video-call-screen_1587979613-701x526.jpg

[cloudwebrtc]

You need to develop a call UI in the app.

[imariman]

I couldn't find any example or information about that. Let say I developed a UI, how can I change this UI with the default Call Screen? I would appreciate if you give a little bit detail or share some links about that issue. Thank you very much.

[aikd101]

I am also looking for a solution to this. If you found the solution please don't hesitate to share.

[aponski]

I would also like to see an example.

[rekonvald]

I am looking for solution also

[imariman]

I have solved this problem by using another package called "connectycube_flutter_call_kit". Link: https://pub.dev/packages/connectycube_flutter_call_kit

By default, this package uses its custom UI which includes the Connectycube logo, but you can change it by yourself. In Windows, once I download the package, the directory of package becomes "C:\Users<username>\AppData\Local\Pub\Cache\hosted\pub.dartlang.org\connectycube_flutter_call_kit-0.0.1-dev.1". Open Android Studio, and change "Android/src/main/res/layout/activity_incoming_call.xml".

Good luck.

[rekonvald]

Thank you, but for Android we just can call backToForeground and see custom incoming call, the main difficulty is with ios(

[jenniestrongbow]

@Imariman, how did you register their plugin in the application file? ConnectycubeFlutterCallKitPlugin.registerWith fails for me. Thanks.

[imariman]

@jenniestrongbow I wrote my own method.

---

.Application.kt

override fun registerWith(registry: PluginRegistry) {

com.connectycube.flutter.connectycube_flutter_call_kit.ConnectycubeFlutterCallKitPlugin().registerWith(registry.registrarFor("com.connectycube.flutter.connectycube_flutter_call_kit.ConnectycubeFlutterCallKitPlugin")); }

---

ConnectycubeFlutterCallKitPlugin.kt

fun registerWith(registrar: PluginRegistry.Registrar) { mainActivity = registrar.activity() registrar.addNewIntentListener(this) onAttachedToEngine(registrar.context(), registrar.messenger()) }

[jenniestrongbow]

@imariman thanks! Could you please publish a very simple flutter example explaining on how to use their plugin? I'm really struggling.

All I want to be able to do is show a full screen incoming call screen inside the FCM's onBackgroundMessage method.

How can I handle the accept/reject buttons in flutter?

Thanks

[jenniestrongbow]

@imariman, thanks to you, I managed to show the full screen notification.

Can you pls show me how to handle the accept / reject buttons?

Thanks

[imariman]

@jenniestrongbow Happy to hear you have managed to show the screen you want. Handling accept/reject buttons is the easiest part. ConnectycubeFlutterCallKit.instance.init() method has two parameters; "onCallAccepted" and "onCallRejected". Just write your logic there and it works.

[jenniestrongbow]

@imariman thanks again. Last question. The init method has no impact as the showCallNotification method cannot be used with an instance. How do I use init and showCallNotification using the same instance? Thanks

[imariman]

@jenniestrongbow Methods like showCallNotification, setOnLockScreenVisibility are static methods, you can't call a static method like ConnectycubeFlutterCallKit.instance.showCallNotification . The static method belongs to a class instead of class instances.

Just init the ConnectycubeFlutterCallKit with your logic, and set the fields of showCallNotification. Example code below.

` ConnectycubeFlutterCallKit.instance.init( onCallAccepted: ( String sessionId, int callType, int callerId, String callerName, Set opponentsIds, ) async { // Your Logic Here When user presses Green Button on the screen. return null; }, onCallRejected: (String sessionId, int callType, int callerId, String callerName, Set opponentsIds) { // Your Logic Here When user presses Red Button on the screen. return null; }, ); await ConnectycubeFlutterCallKit.setOnLockScreenVisibility( isVisible: true, );

    await ConnectycubeFlutterCallKit.showCallNotification(
      sessionId: sessionId,
      callType: type == "video" ? 1 : 0,
      callerName: number,
      callerId: 0,
      opponentsIds: s, 
    );

`

Hope it helps.

[jenniestrongbow]

@imariman you are a gentleman, thanks a million for your help!!!

[sarathvs41]

@imariman When app is in terminated how did u connect to socket.... can u help me that?.. socket connection works in background in flutter?... how did u figured that

[imariman]

@sarathvs41 I used Firebase Messaging to handle background messages when app is terminated. Once you trigger "onBackgroundMessage", you can show notification or add data to database. Once user clicks to notification, app starts and you can make your socket connetion to your server. There are some other alternatives like "background_fetch" but since firebase messaging solved my problem I didn't take a deep look at it.

[sarathvs41]

@imariman Thanks for your reply

[chetansharmapsi]

@imariman I am also following your suggestions related showing call notification from onBackgroundMessage . I am able to show incoming call notification and full screen (when phone is in locked state). Can you please suggest how you managed to handle accept/reject buttons events when app is in background? I tried to apply listeners onCallAccepted and onCallRejected, but they are not working when they are set from onBackgroundMessage (or at any part in code) and app is in background.

[chetansharmapsi]

@imariman I am also following your suggestions related showing call notification from onBackgroundMessage . I am able to show incoming call notification and full screen (when phone is in locked state). Can you please suggest how you managed to handle accept/reject buttons events when app is in background? I tried to apply listeners onCallAccepted and onCallRejected, but they are not working when they are set from onBackgroundMessage (or at any part in code) and app is in background.

I am not sure, but It seems issue at my side is because of old flutter and firebase_messaging version.

[aravindhkumar23]

@imariman thanks for mentioning the package that solves Many developers problems,

I have used the plugin which you have suggested and it works when app in background mode (onCallAccepted is called - and I do my logic based on the accept/reject). but when the app is in killed state lam getting notification to accept/reject but onCallAccepted is not called , the same happens when app is in locked mode.

can you please help on this to get it done.

Thanks in advance.

[suzanpradhan]

@aravindhkumar23 can you share a simple example app using this plugin? I could not find a way to show the call screen.

[isuru19963]

How To handle onCallAccepted in App Kill State? I use Firebase background Notification triggered but not answer. With my Function

[kjkartik]

for this we can use /packages/connectycube_flutter_call_kit

[Manishmg3994]

can you provide me the source code for that file or project

[palashsethiya]

@imariman What is the sessionId in CallEvent method, can you share the example of this plugin

Thanks in advance.

[ShanthiniMM]

@imariman I am developing an app in flutter. Actually, I need to display my custom incoming and outgoing call screens instead of the default call screens. Kindly help me to solve this. Thanks in advance

[BhaskarTrigsy]

@imariman @jenniestrongbow can you please share the source code

[fuadj]

Thank you a million @imariman you are a gentleman, you have no idea how much value you gave us

[fuadj]

@BhaskarTrigsy the source is part of the project https://pub.dev/packages/connectycube_flutter_call_kit. the example project is a pretty basic architecture where you include the package in your yaml file and the project does the rest. To test if the integration into your project is working, send an FCM message with your device's token.