Customize the background

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to change the background image of the live audio room.

The reference code below implements the following custom settings, with the following effect:

Show the title and roomID of the live audio room in the top left corner.
Show a custom background image.

Untitled

class LivePage extends StatelessWidget {
  const LivePage({Key? key, required this.roomID, this.isHost = false})
      : super(key: key);

  final String roomID;
  final bool isHost;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
        appID: YourSecret.appID,
        appSign: YourSecret.appSign,
        userID: localUserID,
        userName: 'user_$localUserID',
        roomID: roomID,

        // Modify your custom configurations here.
        config: isHost
            ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
          ..background = background(),
      ),
    );
  }

  Widget background() {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            image: YourBackgroundImage(),
          ),
        ),
        const Positioned(
            top: 10,
            left: 10,
            child: Text(
              "Live Audio Room",
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Color(0xff1B1B1B),
                fontSize: 15,
                fontWeight: FontWeight.w600,
              ),
            )),
        Positioned(
          top: 10 + 20,
          left: 10,
          child: Text(
            "ID: $roomID",
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(
              color: Color(0xff606060),
              fontSize: 12,
              fontWeight: FontWeight.w500,
            ),
          ),
        )
      ],
    );
  }
}

Copied!