youtube_player_flutter
youtube_player_flutter copied to clipboard
sarbagyastha
[BUG] Fullscreen is not pure full screen feature.
Everything works fine for me, just the fullscreen thing. its just rotating the orientation of the app. If I go back from the full screen, the app orientation is landscape which is not expected. also all the widgets are not hidden like appbar and other widget when we go full screen.
_controller.value.isFullScreen is a final value so I am not even able to use it to show or hide the widgets based on the full screen state.
Hi @princeteck. I had a similar issue and I managed to solve it by adding a boolean variable to know when we are or not using Fullscreen, so I can change AppBar to null when we are using Fullscreen. Also, I added a WillPopScope widget to handle the back button press when Fullscreen to exit fullscreen. Here is my final file. I receive a Live Object as Parameter.
class LiveDetail extends StatefulWidget {
final Live live;
LiveDetail({
Key key,
@required this.live,
}) : super(key: key);
@override
_LiveDetailState createState() => _LiveDetailState();
}
class _LiveDetailState extends State<LiveDetail> {
YoutubePlayerController _controller;
bool showAppBar = true;
@override
void initState() {
_controller = YoutubePlayerController(
initialVideoId: widget.live.videoId,
flags: YoutubePlayerFlags(autoPlay: true, isLive: widget.live.isLive, controlsVisibleAtStart: true),
);
super.initState();
}
Future<bool> _onWillPop() {
if (_controller.value.isFullScreen) {
_controller.toggleFullScreenMode();
} else {
Navigator.pop(context);
}
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: _onWillPop,
child: MaterialApp(
title: 'Live',
theme: ThemeData(primaryColor: Color(CustomColors.grena)),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: showAppBar
? AppBar(
title: Text(widget.live.title),
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
)
: null,
body: Container(
child: YoutubePlayerBuilder(
player: YoutubePlayer(controller: _controller),
builder: (context, player) {
return Column(
children: <Widget>[player],
);
},
onEnterFullScreen: () {
setState(() {
showAppBar = false;
});
},
onExitFullScreen: () {
setState(() {
showAppBar = true;
});
},
),
)),
),
);
}
}
Simply place your Scaffold under
YoutubePlayerBuilder
this seems to work but now one new issue I am facing. the video is cropped when tested on live device but shows correctly on iOS simulator. I think the aspect Ratio is screwed up.
Hi @princeteck. I had a similar issue and I managed to solve it by adding a boolean variable to know when we are or not using Fullscreen, so I can change AppBar to null when we are using Fullscreen. Also, I added a WillPopScope widget to handle the back button press when Fullscreen to exit fullscreen. Here is my final file. I receive a Live Object as Parameter.
class LiveDetail extends StatefulWidget { final Live live; LiveDetail({ Key key, @required this.live, }) : super(key: key); @override _LiveDetailState createState() => _LiveDetailState(); } class _LiveDetailState extends State<LiveDetail> { YoutubePlayerController _controller; bool showAppBar = true; @override void initState() { _controller = YoutubePlayerController( initialVideoId: widget.live.videoId, flags: YoutubePlayerFlags(autoPlay: true, isLive: widget.live.isLive, controlsVisibleAtStart: true), ); super.initState(); } Future<bool> _onWillPop() { if (_controller.value.isFullScreen) { _controller.toggleFullScreenMode(); } else { Navigator.pop(context); } } @override Widget build(BuildContext context) { return WillPopScope( onWillPop: _onWillPop, child: MaterialApp( title: 'Live', theme: ThemeData(primaryColor: Color(CustomColors.grena)), debugShowCheckedModeBanner: false, home: Scaffold( appBar: showAppBar ? AppBar( title: Text(widget.live.title), leading: new IconButton( icon: new Icon(Icons.arrow_back), onPressed: () { Navigator.pop(context); }, ), ) : null, body: Container( child: YoutubePlayerBuilder( player: YoutubePlayer(controller: _controller), builder: (context, player) { return Column( children: <Widget>[player], ); }, onEnterFullScreen: () { setState(() { showAppBar = false; }); }, onExitFullScreen: () { setState(() { showAppBar = true; }); }, ), )), ), ); } }
But setstate will rebuild the widget, mean the video will restart again and again when onEnterFullScreen and onExitFullScreen callback triggered
Simply place your Scaffold under
YoutubePlayerBuilder
I'm sorry to re-open this issue, but I used this workaround and I got the same result as @princeteck. The video is cropped, so I can't see all the captions.
If someone have a solution for this it would be great :)
The problem is occurring because this plugin scaling player in the case of fullscreen. I was able to solve this problem by removing the manual scaling.
Steps to solve this problem:-
-
Copy the below files of the plugin to your project (so we can change the plugin code).
-
Now go to copied youtube_player.dart and navigate to buildPlayer() method, and remove the Transform.scale widget(parent widget of RawYoutubePlayer) from hierarchy and use RawYoutubePlayer directly. This will solve your problem because we do not want to scale the video. Please look at the attached screenshot for a better context of how your buildPlayer() method looks before and after.
Hi @princeteck. I had a similar issue and I managed to solve it by adding a boolean variable to know when we are or not using Fullscreen, so I can change AppBar to null when we are using Fullscreen. Also, I added a WillPopScope widget to handle the back button press when Fullscreen to exit fullscreen. Here is my final file. I receive a Live Object as Parameter.
class LiveDetail extends StatefulWidget { final Live live; LiveDetail({ Key key, @required this.live, }) : super(key: key); @override _LiveDetailState createState() => _LiveDetailState(); } class _LiveDetailState extends State<LiveDetail> { YoutubePlayerController _controller; bool showAppBar = true; @override void initState() { _controller = YoutubePlayerController( initialVideoId: widget.live.videoId, flags: YoutubePlayerFlags(autoPlay: true, isLive: widget.live.isLive, controlsVisibleAtStart: true), ); super.initState(); } Future<bool> _onWillPop() { if (_controller.value.isFullScreen) { _controller.toggleFullScreenMode(); } else { Navigator.pop(context); } } @override Widget build(BuildContext context) { return WillPopScope( onWillPop: _onWillPop, child: MaterialApp( title: 'Live', theme: ThemeData(primaryColor: Color(CustomColors.grena)), debugShowCheckedModeBanner: false, home: Scaffold( appBar: showAppBar ? AppBar( title: Text(widget.live.title), leading: new IconButton( icon: new Icon(Icons.arrow_back), onPressed: () { Navigator.pop(context); }, ), ) : null, body: Container( child: YoutubePlayerBuilder( player: YoutubePlayer(controller: _controller), builder: (context, player) { return Column( children: <Widget>[player], ); }, onEnterFullScreen: () { setState(() { showAppBar = false; }); }, onExitFullScreen: () { setState(() { showAppBar = true; }); }, ), )), ), ); } }
Or you can only change the toolbarHeight param in the AppBar
56 is the deffault value
AppBar(
title: Text('Your title'),
toolbarHeight: _fullScreen ? 0 : 56,
),
The problem is occurring because this plugin scaling player in the case of fullscreen. I was able to solve this problem by removing the manual scaling.
Steps to solve this problem:-
- Copy the below files of the plugin to your project (so we can change the plugin code).
- Now go to copied youtube_player.dart and navigate to buildPlayer() method, and remove the Transform.scale widget(parent widget of RawYoutubePlayer) from hierarchy and use RawYoutubePlayer directly. This will solve your problem because we do not want to scale the video. Please look at the attached screenshot for a better context of how your buildPlayer() method looks before and after.
This worked, was almost dropping the pluggin until i followed the instruction, thanks
