Minimize livestream window

With only two simple steps, you can achieve the effect of minimizing the livestream window within the application.

Ideally, the final effect will look like this:

Normal livestream scene:

PK battle scene:

1. Integrate the minimize function into the app

Support minimize

There are two ways to minimize the live streaming window.

One way is to use the encapsulated ZegoMenuBarButtonName.minimizingButton.

Another way is to customize a button, and when the button is clicked, invoke ZegoUIKitPrebuiltLiveStreamingController's minimize.toMinimize() method.

Display the minimize button

Use ZegoUIKitPrebuiltLiveStreamingController's minimize.toMinimize()

Configure the Overlay

To achieve the effect of minimizing the window, you need to use the ZegoUIKitPrebuiltLiveStreamingMiniOverlayPage component and insert it into the Overlay of the app.

Sample code

Prevent building multiple ZegoUIKitPrebuiltLiveStreaming

When you minimize the livestream interface, clicking the enter button again will lead to re-entering the livestream room if the button is not restricted. To avoid this situation, it is necessary to restrict the button.

Therefore, in the click event of the button, if it is currently in a minimized state, the page jump operation should not be carried out.

Untitled

ElevatedButton(
    onPressed: () {
      if (ZegoUIKitPrebuiltLiveStreamingController().minimize.isMinimizing) {
          /// when the application is minimized (in a minimized state),
          /// disable button clicks to prevent multiple PrebuiltLiveStreaming components from being created.
          return;
      }

      /// The code you used to initialize or navigate ZegoUIKitPrebuiltLiveStreaming previously
      Navigator.pushNamed(
        context,
        ZegoUIKitPrebuiltLiveStreaming(...),
      );
    },
    child: const Text('join'),
  );

Copied!

After completing the above two steps, you can now minimize the livestream window within the application.

2. How to correctly nest widgets within the livestream window

If you need to nest some widgets in ZegoUIKitPrebuiltLiveStreaming, please use ZegoUIKitPrebuiltLiveStreamingConfig.foreground nesting, otherwise these widgets will be lost when you minimize and restore the ZegoUIKitPrebuiltLiveStreaming.

Here is an example code:

Untitled


class LivePage extends StatefulWidget {
  final String liveID;
  final bool isHost;

  const LivePage({
    Key? key,
    required this.liveID,
    this.isHost = false,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => LivePageState();
}

class LivePageState extends State<LivePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveStreaming(
        appID: yourAppID /*input your AppID*/,
        appSign: yourAppSign /*input your AppSign*/,
        userID: 'userID',
        userName: 'userName',
        liveID: widget.liveID,
        config: (widget.isHost
            ? ZegoUIKitPrebuiltLiveStreamingConfig.host(
                plugins: [ZegoUIKitSignalingPlugin()],
              )
            : ZegoUIKitPrebuiltLiveStreamingConfig.audience(
                plugins: [ZegoUIKitSignalingPlugin()],
              ))
          ..foreground = Stack(
            children: [
              Positioned(child: Text('your custom widgets')),
            ],
          )
          ..topMenuBar.buttons = [ZegoMenuBarButtonName.minimizingButton],
      ),
    );
  }
}

Copied!