rotation - Flutter YouTube Player not Rotate When I rotate the screen

Question

Flutter dev how are you? The problem in my code occurs that when I rotate the screen the YouTube player in my flutter app not rotate, which means the youtube player is always in the portrait form but I want when the device is in portrait form then the youtube player automatically goes in the portrait form and when the device is in the landscape form hen the youtube player goes in landscape form and cover screen like YouTube.

This is my flutter code

class YoutubePlayerWidget extends StatefulWidget {
  final String videoUrl;
  final UniqueKey newKey;
  YoutubePlayerWidget({@required this.videoUrl, this.newKey});

  @override
  _YoutubePlayerWidgetState createState() => _YoutubePlayerWidgetState();
}

class _YoutubePlayerWidgetState extends State<YoutubePlayerWidget> {
  // String videoURL = "https://www.youtube.com/watch?v=n8X9_MgEdCg";

  YoutubePlayerController _controller;

  void initState() {
    _controller = YoutubePlayerController(
        initialVideoId: YoutubePlayer.convertUrlToId(widget.videoUrl));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        body: Container(
          color: Colors.black,
          child: Align(
            alignment: Alignment.center,
            child: FittedBox(
              fit: BoxFit.cover,
              child: YoutubePlayer(
                controller: _controller,
                showVideoProgressIndicator: true,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

And My Second Code in this project is here

class YoutubeScreen extends StatefulWidget {
  static const routeName = '/youtube';
  @override
  _YoutubeScreenState createState() => _YoutubeScreenState();
}

class _YoutubeScreenState extends State<YoutubeScreen> {
  String videoURL = "https://www.youtube.com/watch?v=n8X9_MgEdCg";

  YoutubePlayerController _controller;

  void initState() {
    _controller = YoutubePlayerController(
        initialVideoId: YoutubePlayer.convertUrlToId(videoURL));

    super.initState();
  }

  Future<bool> _willPopCallback() async {
    // await showDialog or Show add banners or whatever
    // then
    return true; // return true if the route to be popped
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _willPopCallback,
      child: OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
        if (orientation == Orientation.landscape) {
          return Scaffold(
            body: Container(
              color: Colors.black,
              child: Align(
                alignment: Alignment.center,
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: YoutubePlayer(
                    controller: _controller,
                    showVideoProgressIndicator: true,
                  ),
                ),
              ),
            ),
          );
        } else {
          return Scaffold(
            appBar: AppBar(
              iconTheme: IconThemeData(
                color: kSecondaryColor, //change your color here
              ),
              title: Image.asset(
                'assets/images/logo.png',
                fit: BoxFit.contain,
                height: 32,
              ),
              backgroundColor: kBackgroundColor,
            ),
            body: Container(
              color: Colors.black,
              child: Align(
                alignment: Alignment.center,
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: YoutubePlayer(
                    controller: _controller,
                    showVideoProgressIndicator: true,
                  ),
                ),
              ),
            ),
          );
        }
      }),
    );
  }
}

question from:https://stackoverflow.com/questions/65912859/flutter-youtube-player-not-rotate-when-i-rotate-the-screen

Answer 1

Override your dispose method as following:

@override
  void dispose() {
    _controller.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }