logo
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:

Implementing ZegoCallInvitationUIConfig.inviter.backgroundBuilder or ZegoCallInvitationUIConfig.invitee.backgroundBuilder,

You need to return the desired background widget.

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

backgroundBuilder
await ZegoUIKitPrebuiltCallInvitationService().init(
    ...
    plugins: [
      ZegoUIKitSignalingPlugin(),
    ],
    uiConfig: ZegoCallInvitationUIConfig(
      inviter: ZegoCallInvitationInviterUIConfig(
        backgroundBuilder: (
            BuildContext context,
            Size size,
            ZegoCallingBuilderInfo info,
            ) {
                return Container();
            },
        ),
        invitee: ZegoCallInvitationInviteeUIConfig(
            backgroundBuilder: (
                BuildContext context,
                Size size,
                ZegoCallingBuilderInfo 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 ZegoCallingBuilderInfo is as follows:

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

  final ZegoUIKitUser inviter;
  final List<ZegoUIKitUser> invitees;
  final ZegoCallInvitationType callType;
  final String customData;
}
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