Call Kit
  • iOS
  • Android
  • Web
  • Flutter : Dart
  • React Native
  • Overview
  • Quick start
  • Custom prebuilt UI

Quick start

Last updated:2022-11-03 15:57

Integrate the SDK

Add ZegoUIKitPrebuiltCall as dependencies

Run the following code in your project root directory:

flutter pub add zego_uikit_prebuilt_call

Import the SDK

Now in your Dart code, import the prebuilt Call Kit SDK.

import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

Using the ZegoUIKitPrebuiltCall in your project

  • Go to ZEGOCLOUD Admin Console, get the appID and appSign of your project.
  • Specify the userID and userName for connecting the Call Kit service.
  • Create a callID that represents the call you want to make.
  • userID and callID can only contain numbers, letters, and underlines (_).
  • Users that join the call with the same callID can talk to each other.
class CallPage extends StatelessWidget {
  const CallPage({Key? key, required this.callID}) : super(key: key);
  final String callID;

  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltCall(
      appID: yourAppID, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
      appSign: yourAppSign, // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
      userID: 'user_id',
      userName: 'user_name',
      callID: callID,
      // You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall() 
        ..onOnlySelfInRoom = () => Navigator.of(context).pop(),
    );
  }
}

Now, you can make a new call by navigating to this CallPage.

Configure your project

  • Android:
  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.

compileSdkVersion.png

  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.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    /Pics/ZegoUIKit/Flutter/permission_android.png
  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.** { *; }

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'

Pics/ZegoUIKit/Flutter/android_class_confusion.png

  • iOS:

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>

/Pics/ZegoUIKit/Flutter/permission_ios.png

Run & Test

Now you have finished all the steps!

You can simply click the Run or Debug to run and test your App on your device.

/Pics/ZegoUIKit/Flutter/run_flutter_project.jpg

Custom prebuilt UI

Resources