Customizing Calling Background

You can easily customize the call background to enhance the visual experience for users. Follow the steps below to implement this feature in your application:

1. Implementing ZegoCallInvitationUIConfig.callingBackgroundBuilder,

   You need to return the desired background widget.

   The ZegoCallingBackgroundBuilderInfo will include information about the inviter, invitees, and call type.

  ZegoUIKitPrebuiltCallInvitationService().init(
    ...
    plugins: [
      ZegoUIKitSignalingPlugin(),
    ],
    uiConfig: ZegoCallInvitationUIConfig(
      callingBackgroundBuilder: (
        BuildContext context,
        Size size,
        ZegoCallingBackgroundBuilderInfo info,
      ) {
        return Container(
          width: size.width,
          height: size.height,
          decoration: BoxDecoration(color: Colors.blue.withOpacity(0.5)),
          child: Center(
            child: Text(
              'inviter:${info.inviter.name}, invitees:${info.invitees.map((e) => '${e.name},')}',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 12,
                decoration: TextDecoration.none,
              ),
            ),
          ),
        );
      },
    ),
  );

The prototype of ZegoCallingBackgroundBuilderInfo is as follows:

ZegoCallingBackgroundBuilderInfo

class ZegoCallingBackgroundBuilderInfo {
  ZegoCallingBackgroundBuilderInfo({
    required this.inviter,
    required this.invitees,
    required this.callType,
  });

  final ZegoUIKitUser inviter;
  final List<ZegoUIKitUser> invitees;
  final ZegoCallType callType;
}

1

Copied!

The implemented effect is shown in the following image.

caller	callee