logoUIKit
On this page

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 inviterinvitees, and call type.

callingBackgroundBuilder
  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,
              ),
            ),
          ),
        );
      },
    ),
  );
1
Copied!

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.

callercallee

Previous

Hide the decline or cancel button

Next

Auto re send call invitation after call timeout

On this page

Back to top