Flutter v5 UIKit: Implement default calling in Group chat

How-To Guides
1

Guide Overview

This guide explains how to implement the Default Calls in group chat in Flutter UiKit v5.

UIKit Version:

cometchat_chat_uikit: ^5.2.1
cometchat_calls_uikit: ^5.0.7

Steps to Implement Default Calls in Group:

1. Extend the Call Listener in the Home Screen, add and remove the listener in init() and dispose() respectively:

class _HomescreenState extends State<Homescreen> with CallListener {

String listenerId = "UNIQUE_LISTENER_ID";

@override
  void initState() {
    super.initState();
    requestCallPermissions();
    CometChat.addCallListener(listenerId, this); //Add listener
  }

  @override
  void dispose() {
    super.dispose();
    CometChat.removeCallListener(listenerId); //Remove listener
  }
}

2. Add a custom call icon in the Message Header:

appBar: CometChatMessageHeader(
          hideVoiceCallButton: true,
          hideVideoCallButton: true,
          user: widget.user,
          group: widget.group,
          trailingView: (User? user, Group? group, BuildContext context) {
            return [
               IconButton(onPressed: () {
                 if (group != null) {
                   initiateCall(context, group.guid, true);
                 }
              }, icon: Icon(Icons.add_ic_call_outlined)),
            ];
          },
        ),

3. Create a initiateCall function to create a call object and initiate the call:

void initiateCall(BuildContext context, String user, bool isGroup) {
    if (isGroup) {
      String receiverID = user;
      String receiverType = CometChatReceiverType.group;
      String callType = CometChatCallType.audio;
      Call call = Call(
          receiverUid: receiverID, receiverType: receiverType, type: callType);
      CometChat.initiateCall(call, onSuccess: (Call call) {
        debugPrint("Call Initiated for group");
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => CometChatOutgoingCall(call: call)));
      }, onError: (CometChatException e) {
        debugPrint("Error: $e");
      });
    } else {
      String receiverID = user;
      String receiverType = CometChatReceiverType.user;
      String callType = CometChatCallType.audio;
      Call call = Call(
          receiverUid: receiverID, receiverType: receiverType, type: callType);
      CometChat.initiateCall(call, onSuccess: (Call call) {
        debugPrint("Call Initiated for user");
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => CometChatOutgoingCall(call: call)));
      }, onError: (CometChatException e) {
        debugPrint("Error: $e");
      });
    }
  }

4. Override the necessary calling methods in the HomeScreen:

@override
  void onIncomingCallReceived(Call call) {
    super.onIncomingCallReceived(call);
    debugPrint("onIncomingCallReceived");
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => IncomingCallScreen(call: call)),
    );
  }

  @override
  void onIncomingCallCancelled(Call call) {
    super.onIncomingCallCancelled(call);
    debugPrint("onIncomingCallCancelled");
  }

  @override
  void onOutgoingCallAccepted(Call call) {
    super.onOutgoingCallAccepted(call);
    debugPrint("onOutgoingCallAccepted");
    CallSettingsBuilder callSettingsBuilder = CallSettingsBuilder()
      ..setMode = Mode.MODE_DEFAULT
      ..setAudioOnlyCall = true;
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => CometChatOngoingCall(
              sessionId: "$call.sessionId",
              callSettingsBuilder: callSettingsBuilder,callWorkFlow: CallWorkFlow.defaultCalling,
            )));
  }

  @override
  void onOutgoingCallRejected(Call call) {
    super.onOutgoingCallRejected(call);
    debugPrint("onOutgoingCallRejected");
    if (Navigator.canPop(context)) {
      Navigator.pop(context);
    }
  }

@override
void onCallEndedMessageReceived(Call call) {
  // Implement method
}