logo
ConsoleSign Up
In-app Chat Kit
Flutter: Dart
Overview
Quick start
Release notes
UI components
Advanced features
On this page

Use in conjunction with Call Kit

This doc will introduce how to use In-app Chat Kit with Call Kit.

Prerequisites

Integrate the In-app Chat Kit SDK into your project. For more information, see Quick start.

Integrate the Call Kit

Add Call Kit dependency

  1. Run the following code in your project root directory:
flutter pub add zego_uikit_prebuilt_call
flutter pub add zego_uikit_signaling_plugin
  1. Run the following code in your project root directory to install all dependencies.
flutter pub get

Initialize the Call Kit

To receive the call invites from others and let the calling notification show on the top bar when receiving it, you will need to initialize the call invitation service (ZegoUIKitPrebuiltCallInvitationService) first.

1. Set up the context.

To make the UI show when receiving a call invite, you will need to get the Context. To do so, do the following 3 steps:

  • 1.1 Initialize the ZIMKit.
  • 1.2 Define a navigatorkey, then set the navigatorKey to ZegoUIKitPrebuiltCallInvitationService.
  • 1.3 Register the navigatorKey to MaterialApp.
void main() {

  /// 1.1 init ZIMKit
  ZIMKit().init(
    appID: YourSecret.appID, // your appid
    appSign: YourSecret.appSign, // your appSign
  );

  /// 1.2 define a navigator key, then set navigator key to ZegoUIKitPrebuiltCallInvitationService
  final navigatorKey = GlobalKey<NavigatorState>();
  ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);

  runApp(ZIMKitDemo(navigatorKey));
}
class ZIMKitDemo extends StatelessWidget {
  const ZIMKitDemo(this.navigatorKey, {Key? key}) : super(key: key);

  final GlobalKey<NavigatorState>? navigatorKey;

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      /// 1.3: register the navigator key to MaterialApp
      navigatorKey: navigatorKey,
      debugShowCheckedModeBanner: false,
      title: 'ZIMKit Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ZIMKitDemoLoginPage(),
    );
  }
}

2. Initialize/Deinitialize the call invitation service.

  • 2.1 Initialize the service when your app users logged in successfully or re-logged in after an exit.
await ZIMKit().connectUser(id: userID.text, name: userName.text).then((errorCode) async {
  if (mounted) {
    if (errorCode == 0) {
      /// 2.1. initialized ZegoUIKitPrebuiltCallInvitationService
      /// when app's user is logged in or re-logged in
      /// We recommend calling this method as soon as the user logs in to your app.
      await ZegoUIKitPrebuiltCallInvitationService().init(
        appID: yourAppID /*input your AppID*/,
        appSign: yourAppSign /*input your AppSign*/,
        userID: currentUser.id,
        userName: currentUser.name,
        plugins: [ZegoUIKitSignalingPlugin()],
      );
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(
          builder: (context) => const ZIMKitDemoHomePage(),
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('login failed, errorCode: $errorCode'),
        ),
      );
    }
  }
});
  • 2.2 Deinitialize the service after your app users logged out.
/// on App's user logout
void onUserLogout() {
  /// 2.2. de-initialization ZegoUIKitPrebuiltCallInvitationService
  /// when app's user is logged out
  ZegoUIKitPrebuiltCallInvitationService().uninit();
}

Add a call button

Add a call button to the appBar using the appBarActions parameter of ZIMKitMessageListPage:

ZIMKitMessageListPage(
  conversationID: conversation.id,
  conversationType: conversation.type,
  appBarActions: conversation.type == ZIMConversationType.peer
      ? [
          for (final isVideoCall in [true, false])
            ZegoSendCallInvitationButton(
              iconSize: const Size(40, 40),
              buttonSize: const Size(50, 50),
              isVideoCall: isVideoCall,
              invitees: [ZegoUIKitUser(id: conversation.id, name: conversation.name)],
              onPressed: (String code, String message, List<String> errorInvitees) {
                onCallInvitationSent(context, code, message, errorInvitees);
              },
            ),
        ]
      : [],
);

void onCallInvitationSent(BuildContext context, String code, String message, List<String> errorInvitees) {
  late String log;
  if (errorInvitees.isNotEmpty) {
    log = "User doesn't exist or is offline: ${errorInvitees[0]}";
    if (code.isNotEmpty) {
      log += ', code: $code, message:$message';
    }
  } else if (code.isNotEmpty) {
    log = 'code: $code, message:$message';
  }
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text(log)),
  );
}

Configure your project

After integrating Call Kit, configure the following for your app project

  1. If your project is created with Flutter 2.x.x, you will need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.
  1. And in the same file, edit the minSdkVersion.
minSdkVersion 21
  1. Add app permissions.

Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE"/>
  1. Prevent code obfuscation.

To prevent obfuscation of the SDK public class names, do the following:

a. In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

-keep class **.zego.**  { *; }
-keep class **.**.zego_zpns.** { *; }

b. Add the following config code to the release part of the your_project/android/app/build.gradle file.

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  1. To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
  1. To use the notifications and build your app correctly, navigate to the Build Settings tab, and set the following build options for your target app.

Refer to and set the following build options:

  • In the Runner Target:

    a. Build Libraries for Distribution -> NO

    b. Only safe API extensions -> NO

    c. iOS Deployment Target -> 11 or greater

  • In other Targets:

    a. Build Libraries for Distribution -> NO

    b. Only safe API extensions -> YES

So far, you have successfully integrated Call Kit in the In-app Chat Kit. You can now run and experience it.

More resources

The above content only introduces the basic configuration required for integrating Call Kit. If you need to further customize the configuration of the call, refer to the following documents:

Call Kit - Quick start

Steps in this doc helps you to make a call quickly.

Call Kit - Custom prebuilt UI

This article guides you on how to further customize the features and UI of the call.

Previous

Message component

Next

Offline push notifications

On this page

Back to top