Flutter : screen orientation stay landscape after youtube fullscreen

Question

I have flutter app used youtube_player_flutter 8.0.0 package for playing youtube video, I create this youtube player widget :

import 'package:youtube_player_flutter/youtube_player_flutter.dart';

YoutubePlayerBuilder videoPlayer(video) {
  YoutubePlayerController _controller = YoutubePlayerController(
      initialVideoId: video,
      flags: const YoutubePlayerFlags(
          autoPlay: false, controlsVisibleAtStart: true));
  return YoutubePlayerBuilder(
      player: YoutubePlayer(
        controller: _controller,
      ),
      builder: (context, player) {
        return player;
      });
}

and used it in a screen like this :

videoPlayer(currentDay[0]['link'])

the video is work fine, but when I switched to fullscreen the screen be landscape and stay at landsacpe also after I rotate the device. How can I fix that?

Answer 1

When integrating the YoutubePlayer into your application, it’s crucial to wrap the entire screen's content using YoutubePlayerBuilder. This ensures proper handling of fullscreen mode and smooth integration of the player, especially when your screen contains other widgets alongside the video player.

For example, if the video player is not the only component on the screen (e.g., part of a more extensive layout), the entire screen should be wrapped in YoutubePlayerBuilder. Here's an improved and clear example:

String? videoId = YoutubePlayer.convertUrlToId(state
                        .response
                        ?.data
                        ?.promoVideo
                        ?.promoVideos
                        .firstOrNull
                        ?.youtubeLink ??
                    '');

                videoId ??= 'lNQJNImBsKY';

                YoutubePlayerController _controller = YoutubePlayerController(
                  initialVideoId: videoId,
                  flags: const YoutubePlayerFlags(
                    autoPlay: false,
                    mute: false,
                    forceHD: true,
                  ),
                );

return YoutubePlayerBuilder(
                  player: YoutubePlayer(
                    controller: _controller,
                    showVideoProgressIndicator: true,
                    progressIndicatorColor: Colors.amber,
                    progressColors: const ProgressBarColors(
                      playedColor: Colors.grey,
                      handleColor: Colors.black,
                    ),
                    onReady: () {
                      _controller.addListener(() {});
                      Map<String, dynamic> analyticsParam = {
                        'category':
                            'product screen smb mobile app – logged out​',
                        'action':
                            'product video - clicked - %PROMO-VIDEO-MODULE%​​',
                        'label': 'PROMO-VIDEO-MODULE',
                      };
                      AnalyticsManager.logEvent(
                        analyticType: AnalyticsConstants.analyticTypeFirebase,
                        eventName: 'onPlayVideo',
                        parameters: analyticsParam,
                      );
                    },
                  ),
                  builder: (context, player) {
//here is the actual screen
                    return ShopScreen(
                      appbar: BaseAppBar(
                        actions: [
                          GestureDetector(
                            onTap: () {
                              toggleTableViewListner.value =
                                  !toggleTableViewListner.value;
                            },
                            child: ValueListenableBuilder<bool>(
                              valueListenable: toggleTableViewListner,
                              builder: (context, snap, child) {
                                if (snap) {
                                  return Assets.image.layoutWeb.svg();
                                } else {
                                  return Assets.image.slidersHorizontal.svg();
                                }
                              },
                            ),
                          ),
                        ],
                        title: state.response?.data?.scrTitle ?? '',
                      ),
//but I also pass this to more nested UI content layer
                      content: prepareScreenLayout(
                          data: state.response!.data!, player: player),
                    );
                  },
                );

From the documentation, here’s a simpler example to clarify how YoutubePlayerBuilder works:

YoutubePlayerBuilder(
    player: YoutubePlayer(
        controller: _controller,
    ),
    builder: (context, player){
    //Column is not the good example here, put this column inside Scaffold and wrap the Scaffolf with YoutubePlayerBuilder
        return Column(
            children: [
                // some widgets
                player,
                //some other widgets
            ],
        );
    ),
),

Answer 2

Wrap your Scaffold to WillPopScope , then in onWillPop method change orientation of device and return true ..

Example

Widget build(BuildContext context) {
return WillPopScope(onWillPop: () async {
  await SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitUp]);
  return true;
},child :Scaffold(..)

)

Answer 3

You can fix the orientation of the full application with :

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft])
  .then((_) {
  runApp( const MyApp());
  });
}