SOLUTION - SystemUi Overlay Disappearing Using YoutubePlayerFlutter

Question

If this happens when you after you go into full screen.

Before clicking fullscreen

When in fullscreen

Overlay gone on page

Overlay also gone on other pages

Then you will need to add

onExitFullScreen: () => SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: SystemUiOverlay.values),

just under YoutubePlayerBuilder.

Widget build(BuildContext context) {
    
    return YoutubePlayerBuilder(
        onExitFullScreen: () => SystemChrome.setEnabledSystemUIMode(
            SystemUiMode.manual,
            overlays: SystemUiOverlay.values),
        player: YoutubePlayer(controller: _ytController),
        builder: (context, player) {
          return Coumn(
            children: [
            Container(),
            player,
            ]),
          });
        }
           

Apologies if this is not a through guide. I spent ages trying to find the problem that when I figured it out I thought id share as I couldn't find it myself online.

Let me know where you need me to clarify more and id be happy to flesh out more details.

Answer 1

Posted above. The reason this works is because YoutubePlayerFlutter removes the System UI when it enters fullscreen mode but it does not correctly add it back once leaving fullscreen mode.

If you have no need for the UI being removed in the Fullscreen mode then instead place the () => SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: SystemUiOverlay.values), under onEnterFullScreen: instead of onExitFullScreen: