➕ Add auto rotate with device orientation

[YazeedAlKhalaf]

I would like to propose the addition of a very useful feature which is auto rotate on device orientation change,

So for example when the device rotates to landscape it becomes full screen and when the device is in portrait mode it gets out of fullscreen

[Ahmadre]

Thank you so much @YazeedAlKhalaf 🙏

Very good idea! We've got a lot of work and targeting major fixes and documentation. So if you want to contribute here I would be very happy 😊

[flying-wizzy]

I managed to get this to work for my purposes with the help of Youtuber Johannes Milke's Video (not sure if youtube links are appreciated here, but will add if it's not an issue). His approach works like this:

First, you add the package native_device_orientation to your dependencies. Then, in the initstate where you initialize the ChewieController you listen for orientation changes requested by the user, detected by the smartphone's sensor (hence, the useSensor: true flag is vital here). If now the sensor detects, that the user wants to be in portrait mode, but the Chewie player is currently in fullscreen mode, you command the widgets to return to SystemChrome.setPreferredOrientations(DeviceOrientation.values);, so to the currently sensed phone orientation. It is set to values - so all possible orientations - as not to force the phone in the portrait orientation, which could then block your app going into landscape mode on any other page. Also you call _chewieController.exitFullScreen();, so that Chewie knows what's going on.

Then I also cover the opposite case, so the phone wanting to be in portrait, but the chewieController being in fullscreen. This is the code:

NativeDeviceOrientationCommunicator()
        .onOrientationChanged(useSensor: true)
        .listen((event) {
      final bool isPortrait = (event == NativeDeviceOrientation.portraitUp ||
          event == NativeDeviceOrientation.portraitUp);
      final bool isLandscape =
          (event == NativeDeviceOrientation.landscapeLeft ||
              event == NativeDeviceOrientation.landscapeRight);

      if (isPortrait && _chewieController.isFullScreen) {
        _chewieController.exitFullScreen();
        SystemChrome.setPreferredOrientations(DeviceOrientation.values);
      } else if (isLandscape && !_chewieController.isFullScreen) {
        _chewieController.enterFullScreen()
        SystemChrome.setPreferredOrientations(DeviceOrientation.values);
        ;
      }
    });

Also, I added this to my ChewieController:

deviceOrientationsAfterFullScreen: [
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]

Last but not least I added a WillPopScope above the Chewie widget, that guarantees, that my app will not get stuck in any rotation, even when the user hits the "back" button on android. Like so:

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        await SystemChrome.setPreferredOrientations(DeviceOrientation.values);
        return true;
      },
      child: AspectRatio(
        aspectRatio: aspectRatio,
        child: Chewie(
          controller: _chewieController,
        ),
      ),
    );
  }

Correct me if I'm wrong, but this works just fine for me so far!