Flutter v4 UI Kit: Implement Default Calls in Group Chat

How-To Guides
1

Guide Overview

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

UIKit Version:

  cometchat_calls_uikit: ^4.3.5
  cometchat_chat_uikit: ^4.5.11

Steps to Implement:

1. Extend the Call Listener in the Home Screen with necessary variables and add the listeners:

class _HomeScreenState extends State<HomeScreen> 
with WidgetsBindingObserver, CallListener {

  var sessionId = '';
  String listenerId = "UNIQUE_LISTENER_ID";
  Widget? call;

  @override
  void initState() {
    // Other necessary code
    CometChat.addCallListener(listenerId, this);
  }

  @override
  void dispose() {
    // Other necessary code
    CometChat.removeCallListener(listenerId);
    super.dispose();
  }
  // Other necessary methods
}

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

CometChatConversationsWithMessages(
  messageConfiguration: MessageConfiguration(
      messageHeaderConfiguration: MessageHeaderConfiguration(
    appBarOptions: (user, group, context) {
      return [
        InkWell(
          onTap: () {
            if (user != null) {
              initiateCall(context, user.uid, false);
            }
            if (group != null) {
              initiateCall(context, group.guid, true);
            }
          },
          child: const Icon(Icons.call, color: Color(0xFF6851D6)),
        ),
        const SizedBox(width: 10)
      ];
    },
  )),
);

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. Implement the necessary calling methods in the HomeScreen:

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

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

@override
void onOutgoingCallAccepted(Call call) {
  super.onOutgoingCallAccepted(call);
  print("onOutGoingCallAceepted");
  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
}

Note: You can use your own incoming and outgoing screen instead of CometChatIncomingCall and CometChatOutgoingCall screen. You can also use your own logic in the above methods based on your usecase.