Set a leave confirmation dialog

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) ends a live audio room by default when the user clicks the Leave the room button or the Android’s Back button.

If you want to add a confirmation dialog box to double confirm whether the user wants to leave the live audio room, you can use the confirmDialogInfo config:

1. confirmDialogInfo: After configuring this parameter, ZegoUIKitPrebuiltLiveAudioRoom will pop up a confirmation dialog box with the default style before ending the live audio room, showing the confirmation info you set.

The effect will be like this:

Here is the reference code:

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 ZegoUIKitPrebuiltLiveAudioRoom(
      appID: YourSecret.appID,
      appSign: YourSecret.appSign,
      userID: userID,
      userName: 'user_$userID',
      roomID: roomID,

      // Modify your custom configurations here.
      config: isHost
          ? (ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            ..confirmDialogInfo = ZegoDialogInfo(
              title: "Leave the room",
              message: "Are you sure to leave the room?",
              cancelButtonName: "Cancel",
              confirmButtonName: "Leave",
            ))
          : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience(),
    );
  }
}

If the default dialog style can’t meet your needs, or you want to pop up a more complex dialog, then you can use the onLeaveConfirmation parameter. The onLeaveConfirmation is a callback that can be used together with the showDialog of Flutter. And sure, you can also implement the logic that decides whether to end the live audio room or not, or any other business logic in this callback as wanted.

The effect of a custom dialog will be like this:

Here is the reference code:

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 ZegoUIKitPrebuiltLiveAudioRoom(
      appID: YourSecret.appID,
      appSign: YourSecret.appSign,
      userID: userID,
      userName: 'user_$userID',
      roomID: roomID,
      events: ZegoUIKitPrebuiltLiveAudioRoomEvents(onLeaveConfirmation: (
        ZegoLiveAudioRoomLeaveConfirmationEvent event,

        /// defaultAction to return to the previous page
        Future<bool> Function() defaultAction,
      ) async {
        return await showDialog(
          context: context,
          barrierDismissible: false,
          builder: (BuildContext context) {
            return AlertDialog(
              backgroundColor: Colors.blue[900]!.withOpacity(0.9),
              title: const Text("This is your custom dialog",
                  style: TextStyle(color: Colors.white70)),
              content: const Text("You can customize this dialog as you like",
                  style: TextStyle(color: Colors.white70)),
              actions: [
                ElevatedButton(
                  child: const Text("Cancel",
                      style: TextStyle(color: Colors.white70)),
                  onPressed: () => Navigator.of(context).pop(false),
                ),
                ElevatedButton(
                  child: const Text("Exit"),
                  onPressed: () => Navigator.of(context).pop(true),
                ),
              ],
            );
          },
        );
      }),
      // Modify your custom configurations here.
      config: isHost
          ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
          : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience(),
    );
  }
}

If you want to listen for leave events, ZegoUIKitPrebuiltLiveAudioRoom provides an onLeaveLiveAudioRoom(bool isFromMinimizing) callback that will be triggered when the live audio room ends.

And sure, you can also implement custom business logic in the onLeaveLiveAudioRoom. But remember to notice that if isFromMinimizing in onLeaveLiveAudioRoom is true, it means the user left the live audio room directly from the minimizing state. At this time, you cannot use Navigator to go back to the previous page.