Flutter youtube_player_flutter: ^7.0.0+6 full Screen

Question

I am using this plugin youtube_player_flutter: ^7.0.0+6 for playing youtube video. The problem is that when I try to play the video in full screen landscape the video playing but gets cut from edges and covers the whole screen in landscape

here you can video is not covering full height and width

my code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class video extends StatefulWidget {
  @override
  _videoState createState() => _videoState();
}

class _videoState extends State<video> {
  String videoURL = "https://www.youtube.com/watch?v=oxsBSCf5-B8&list=RDoxsBSCf5-B8&start_radio=1";

  YoutubePlayerController _controller;

  @override
  void initState() {

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

    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            child:Column(
              crossAxisAlignment:CrossAxisAlignment.stretch,
              children: <Widget>[
                YoutubePlayerBuilder(
                  player: YoutubePlayer(
                    controller: _controller,
                    aspectRatio:16/9,

                    showVideoProgressIndicator: true,
                  ),
                builder:(context,player){
                    return Column(
                    children: <Widget>[
                     player
                    ],
                    );
                },
                ),
              ],
            ),
          ),
        ),
      ),


    );
  }
}

Answer 1

I had the same problem just now.
I tried this and it seems to work for full screen. Also added a OrientationBuilder for removing the AppBar in landscape mode only.\

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: OrientationBuilder(builder: 
           (BuildContext context, Orientation orientation) {
      if (orientation == Orientation.landscape) {
        return Scaffold(
          body: youtubeHirarchy(),
        );
      } else {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: youtubeHirarchy(),
        );
      }
    }),
  );
}

youtubeHierarchy() {
  return Container(
    child: Align(
      alignment: Alignment.center,
      child: FittedBox(
        fit: BoxFit.fill,
        child: YoutubePlayer(
          controller: _controller,
        ),
      ),
    ),
  );
}

(onWillPop is there for pausing video when going back)
Seems to have the default menues of youtube behind the actual video. If you come up with a better solution please let me know.

Answer 2

If what you want to achieve is

1. Show Video on entire screen (Full-screen)

   

2. Show video widget on portrait together with other widget

   

here is how i fixed it

   child: OrientationBuilder(
    
    builder: (context, orientaion) {
     switch(orientaion){
       
       case Orientation.portrait:
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Theme.of(context).appBarTheme.color,
          appBar: AppBar(
            // title: Text(widget.video.title),
            title: Text(
              "Detail",
              style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
            ),
          ),
          body: Body);
  
         // TODO: Handle this case.
         break;
       case Orientation.landscape:
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Theme.of(context).appBarTheme.color,
         
          body: Body());
  
         // TODO: Handle this case.
         break;
     }
     
    }
  ),

Build Body based the orientation

bool fullScreen = false;

YoutubePlayerBuilder _buildBurnerWidgetContent() {
  return YoutubePlayerBuilder(
    onEnterFullScreen: () {
      this.fullScreen = true;
    },
    onExitFullScreen: () {
      this.fullScreen = false;
    },
    player: YoutubePlayer(
      aspectRatio: 16 / 9,
      controller: _youtubecontroller,
      showVideoProgressIndicator: true,
      onReady: () {},
      progressColors: ProgressBarColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
      ),
    ),
    builder: (context, player) {
      return Column(
        children: [
          // some widgets
          // player,
          //some other widgets
        ],
      );
    });

}

while building the body with different section i check screen orientation

import 'package:flutter/material.dart';

class Body extends StatefulWidget {
  @override
  _hhState createState() => _hhState();
}

class _hhState extends State<Body> {
  bool fullScreen;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Flexible(flex: 5, child: _buildBurnerWidgetContent()),
      !this.fullScreen
          ? Padding(padding: null, child: Text("description"))
          : Container(),
      !this.fullScreen
          ? Padding(padding: null, child: Text("TabView"))
          : Container(),
      !this.fullScreen
          ? Padding(padding: null, child: Text("comments"))
          : Container()
    ]));
  }

  _buildBurnerWidgetContent() {}
}

Answer 3

So i too faced one similar issue like this and the solution is actually in their docs on the pub.dev itself. You need to add the youtubeplayerbuilder at the top of the widget tree and everything else like scaffold will be returned from it's builder method. https://pub.dev/packages/youtube_player_flutter enter image description here