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
],
);
},
),
],
),
),
),
),
);
}
}
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.
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;
}
}
),
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
],
);
});
}
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() {}
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With