Flutter - Video Auto rotation landscape and portrait

Jigish
September 1, 2023
252 views
1 vote
2 Answers

I create the video screen, and when the device rotates, the video player also rotates. I have used the youtube player flutter library with auto-rotation enabled. When the device rotates from portrait to landscape, the video player rotates accordingly. However, when the device rotates from landscape to portrait, the rotation does not occur automatically, although it works manually. The code below is used in the build widget.

 // Auto rotation Setup
if (isAutoRotation) {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
} else {
  if (isFullScreenClick) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
  } else {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }
}

isFullScreenClick Boolean variable value get from the library fullscreen on that time true and then false.

void _onPlayerStateChange() {

      setState(() {
        //Value update from the library. isFullScreen or not.
        isFullScreenClick = _controller.value.isFullScreen;
      });
  }

Below code default library method I handle the isAutoRotation flag.

 child: YoutubePlayerBuilder(
          onEnterFullScreen: () {
            setState(() {
              isAutoRotation = false;
            });
          },
          onExitFullScreen: () {
            setState(() {
              // Click on the full screen is AutorotationFlag  on.
              isAutoRotation = true;
            });
            //Navigator.pop(context, true);
          },

Answers

I’m using youtube_player_flutter: ^8.1.2 (Link). The screen rotation feature is working as expected. I initially turned ON screen rotation in my emulator & simulator. By the way, I tested this on Android emulator & iOS simulator. Try & test the below-mentioned code & provide acknowledgement for same.

import "package:flutter/material.dart";
import "package:youtube_player_flutter/youtube_player_flutter.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final YoutubePlayerController controller = YoutubePlayerController(
    initialVideoId: "iLnmTe5Q2Qw",
  );

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: YoutubePlayer(
          controller: controller,
        ),
      ),
    );
  }
}

Updated: as you requested. As your app is always in portrait & doesn’t allow automatic screen rotation, I made a few changes & improvements in my previous answer. Try & test the below-mentioned code & provide acknowledgement for same. If you think I misunderstood, feel free to add a comment.

import "package:flutter/material.dart";
import "package:youtube_player_flutter/youtube_player_flutter.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final YoutubePlayerController controller = YoutubePlayerController(
    initialVideoId: "iLnmTe5Q2Qw",
  );
  bool isInFullScreen = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: isInFullScreen
            ? player()
            : Column(
                children: [
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  Expanded(child: player()),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                  const Text("Some Widget"),
                ],
              ),
      ),
    );
  }

  Widget player() {
    return YoutubePlayerBuilder(
      player: YoutubePlayer(controller: controller),
      onEnterFullScreen: () {
        isInFullScreen = true;
        setState(() {});
      },
      onExitFullScreen: () {
        isInFullScreen = false;
        setState(() {});
      },
      builder: (BuildContext context, Widget widget) => widget,
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Video Auto rotation landscape and portrait

Answers