Flutter - video_player fullscreen

Question

I'm using a plugin called video_player on my Flutter project. I'm able to play and pause videos without a problem, but I want to make it fullscreen and horizontal. I couldn't find anything related to this.

This is the basic code I'm using:

playerController = VideoPlayerController.network(
          "<VIDEO_URL>")
        ..addListener(listener)
        ..setVolume(1.0)
        ..initialize()
        ..play();

Can I make it fullscreen?

Answer 1

As far as I understand, the VideoPlayer doesn't know anything about where it is, but rather just expands to fit within the given space the best it can.

I believe what you want to do is use a RotatedBox as a parent of the video and set the rotation value. Depending on how exactly your app works, you may want to have the video player start horizontal and small, and have a full screen button that switches to landscape mode. However, if the app itself is set up to rotate you'll have to take that into account and un-rotate the video once the phone has been rotated horizontally, which will probably result in uglyness in the UI as the flutter rotation happens and you un-rotate the video.

You probably also want to use a dialog to show the video full-screen so that you can dismiss it and get back to the screen you were at.

I could probably provide a bit more guidance but it does depend on which way you go with that (either locking the app to portrait mode and doing the rotation manually) vs using flutter's built-in rotation.

Answer 2

I have another situation for this question, that's use Chewie plugin, you can install it right here: https://pub.dev/packages/chewie And this is the code that I implemented it:

VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;
  double _aspectRatio = 16 / 9;
  @override
  initState() {
    super.initState();
    print(widget.videoUrl);
    _videoPlayerController = VideoPlayerController.network(widget.videoUrl);
    _chewieController = ChewieController(
      allowedScreenSleep: false,
      allowFullScreen: true,
      deviceOrientationsAfterFullScreen: [
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ],
      videoPlayerController: _videoPlayerController,
      aspectRatio: _aspectRatio,
      autoInitialize: true,
      autoPlay: true,
      showControls: true,
    );
    _chewieController.addListener(() {
      if (_chewieController.isFullScreen) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeRight,
          DeviceOrientation.landscapeLeft,
        ]);
      } else {
         SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]);
      }
    });
  }

Remember restore orientation of the device after exit page:

@override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }


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