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

user_7912122 · Answer

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.

user_4782928 · Answer

If what you want to achieve is

Show Video on entire screen (Full-screen)
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 {
  bool fullScreen;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: [
      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() {}
}

user_11704455 · Answer

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

user_13958012 · Answer

If to use ListView.separated, you can open the video to fullscreen

body: ListView.separated(
    itemBuilder: (context, index) {
      return YoutubePlayer(
        key: ObjectKey(_controllers[index]),
        controller: _controllers[index],
        actionsPadding: const EdgeInsets.only(left: 16.0),
        bottomActions: [
          CurrentPosition(),
          const SizedBox(width: 10.0),
          ProgressBar(isExpanded: true),
          const SizedBox(width: 10.0),
          RemainingDuration(),
          FullScreenButton(),
        ],
      );
    },
    itemCount: _controllers.length,
    separatorBuilder: (context, _) => const SizedBox(height: 10.0),
  ),
);

}

enter link description here

Flutter youtube_player_flutter: ^7.0.0+6 full Screen

4 Answers

Build Body based the orientation

while building the body with different section i check screen orientation