logoUIKit
On this page

Quick start (with call invitation)

You can refer to this document to understand the effects of the offline call invitation (system-calling UI) and complete the basic integration.

TIPS
  1. If your project needs Firebase integration or customization of features like ringtone and UI, complete the basic integration first and then refer to calling config and invitation config for further configuration.

  2. Offline call invitation configuration is complex. If you only require online call invitations, please skip the steps related to firebase console and apple certificate.

UI Implementation Effects

Recorded on Xiaomi and iPhone, the outcome may differ on different devices.

Online callonline call (Android App background)offline call (Android App killed)offline call (iOS App killed)

Integration Guide for Common Components

It is recommended that you start by completing the integration of the common parts, and then proceed with the configuration for Android and iOS in sequence. After successfully setting up the first platform, you can begin configuring the second platform.

Prerequisites

​If you don't know how to create a project and obtain an app ID, please refer to this guide.

Add ZegoUIKitPrebuiltCall as a dependency

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

Import the SDK

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

Untitled
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​import 'package:zego_uikit_signaling_plugin/zego_uikit_signaling_plugin.dart';
1
Copied!

Initialize the call invitation service

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.1 Set up the navigatorkey.

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

    • 1.1.1 Define a navigatorkey.

    • 1.1.2 Set the navigatorKey to ZegoUIKitPrebuiltCallInvitationService.

    • 1.1.3 Register the navigatorKey to MaterialApp.(If you are using GoRouter, you need to register the navigatorKey to GoRouter.)

  • 1.2 call the useSystemCallingUI method in the main.dart file.

MaterialApp
MaterialApp.router
/// 1.1.1 define a navigator key
final navigatorKey = GlobalKey();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// 1.1.2: set navigator key to ZegoUIKitPrebuiltCallInvitationService
  ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);

  // call the useSystemCallingUI
  ZegoUIKit().initLog().then((value) {
    ZegoUIKitPrebuiltCallInvitationService().useSystemCallingUI(
      [ZegoUIKitSignalingPlugin()],
    );

    runApp(MyApp(navigatorKey: navigatorKey));
  });
}

class MyApp extends StatefulWidget {
  final GlobalKey navigatorKey;

  const MyApp({
    required this.navigatorKey,
    Key? key,
  }) : super(key: key);

  @override
  State createState() => MyAppState();
}

class MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      /// 1.1.3: register the navigator key to MaterialApp
      navigatorKey: widget.navigatorKey,
      ...
    );
  }
}
1
Copied!
/// 1.1.1: define a navigator key
final navigatorKey = GlobalKey();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// 1.1.2: set navigator key to ZegoUIKitPrebuiltCallInvitationService
  ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);

  /// call the useSystemCallingUI
  ZegoUIKit().initLog().then((value) {
    ZegoUIKitPrebuiltCallInvitationService().useSystemCallingUI(
      [ZegoUIKitSignalingPlugin()],
    );

    runApp(const MyApp());
  });
}

final GoRouter routerConfig = GoRouter(
  /// 1.1.3: register the navigator key to GoRouter
  navigatorKey: navigatorKey,
  initialLocation: currentUser.id.isEmpty ? PageRouteNames.login : PageRouteNames.home,
  routes: [
    GoRoute(
      path: PageRouteNames.home,
      builder: (BuildContext context, GoRouterState state) => const HomePage(),
    ),
    GoRoute(
      path: PageRouteNames.login,
      builder: (BuildContext context, GoRouterState state) => const LoginPage(),
    ),
  ],
);


class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State createState() => MyAppState();
}

class MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: routerConfig,
      ...
    );
  }
}
1
Copied!
  • 1.3 Initialize/Deinitialize the call invitation service.
Warning
  1. After the user logs in, it is necessary to Initialize the ZegoUIKitPrebuiltCallInvitationService to ensure that it is initialized, every time the application starts, whether the user logs in automatically or manually, it is necessary to ensure that init is called.
  2. When the user logs out, it is ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​important to perform Deinitialize to clear the previous login records, preventing any impact on the next login.
Untitled
/// on App's user login
void onUserLogin() {
  /// 1.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.
  ZegoUIKitPrebuiltCallInvitationService().init(
    appID: yourAppID /*input your AppID*/,
    appSign: yourAppSign /*input your AppSign*/,
    userID: currentUser.id,
    userName: currentUser.name,
    plugins: [ZegoUIKitSignalingPlugin()],
  );
}

/// on App's user logout
void onUserLogout() {
  /// 1.2.2. de-initialization ZegoUIKitPrebuiltCallInvitationService
  /// when app's user is logged out
  ZegoUIKitPrebuiltCallInvitationService().uninit();
}
1
Copied!

The parameters of the ZegoUIKitPrebuiltCallInvitationService().init

PropertyTypeDescription
appIDintThe App ID you get from ZEGOCLOUD Admin Console.
appSignStringThe App Sign you get from ZEGOCLOUD Admin Console.
userIDStringuserID can be something like a phone number or the user ID on your own user system. userID can only contain numbers, letters, and underlines (_), with a maximum length of 32 bytes or less.
userNameStringuserName can be any character or the user name on your own user system, A utf8 string with a maximum length of 256 bytes or less.
pluginsList< IZegoUIKitPlugin >Fixed value. Set it to ZegoUIKitSignalingPlugin as shown in the sample.

​Please refer to the API reference for complete parameters.

Add a call invitation button

Add the button for making call invitations, and pass in the ID of the user you want to call.

Untitled
ZegoSendCallInvitationButton(
   isVideoCall: true,
   //You need to use the resourceID that you created in the subsequent steps. 
   //Please continue reading this document.
   resourceID: "zegouikit_call",
   invitees: [
      ZegoUIKitUser(
         id: targetUserID,
         name: targetUserName,
      ),
      ...
      ZegoUIKitUser(
         id: targetUserID,
         name: targetUserName,
      )
   ],
)
1
Copied!
TIPS

You will create a resourceID in the zegocloud console, Please refer to the video tutorial below for details.

See <Firebase Console and ZEGO Console Configuration> and <Apple Developer Center and ZEGOCLOUD Console Configuration>

Props of ZegoSendCallInvitationButton

PropertyTypeDescription
inviteesList< ZegoUIKitUser >The information of the callee. userID and userName are required. For example: [{ userID: inviteeID, userName: inviteeName }]
isVideoCallboolIf true, a video call is made when the button is pressed. Otherwise, a voice call is made.
resourceIDString?resourceID is a resource identifier used for configuring offline call invitations. See <Firebase Console and ZEGO Console Configuration> and <Apple Developer Center and ZEGOCLOUD Console Configuration>

​Please refer to the API reference for complete parameters.

Configure your project

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.

Warning

Please use real device testing, as the simulator does not support offline call invitation.

Previous

Quick start

Next

Overview