I have an flutter app show some YouTube videos, in some devices... Specifically Samsung A series & Poco mobiles
The videos are displayed in full screen mode like the image shown below
Note that: The full screen mode displayed normal on all devices [Android & iOS] and this error happen only on Samsung A series & Poco mobiles
here my code:
@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: MediaQuery.of(context).size.height * 1,
width: MediaQuery.of(context).size.width * 1,
color: Colors.black,
child: Center(
child:
YoutubePlayerBuilder(
player: YoutubePlayer(
controller: _controller,
aspectRatio: 16 / 9,
showVideoProgressIndicator: true,
progressIndicatorColor: Colors.blueAccent,
topActions: <Widget>[
const SizedBox(width: 8.0),
Expanded(
child: Text(
_controller.metadata.title,
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
size: 25.0,
),
onPressed: () {
//log('Settings Tapped!');
},
),
],
onReady: () {
_isPlayerReady = true;
},
onEnded: (data) {
},
),
builder: (context, player) => Scaffold(
appBar: AppBar(
backgroundColor: kRedColor,
leading: Padding(
padding: const EdgeInsets.only(left: 12.0),
child: IconButton(
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
size: 40,
),
onPressed: () => Navigator.pop(context),
),
),
title: const Text(
'للرجوع للخلف إسحب الشاشة لأسفل',
style: TextStyle(color: Colors.white),
),
),
body: Center(
child: ListView(
children: [
player,
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_space,
Row(
children: [
_text(
'Playback Quality',
_controller.value.playbackQuality ?? '',
),
const Spacer(),
],
),
_space,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: ImageIcon(
AssetImage("assets/icons/Back.png"),
//color: Color(0xFF3A5A98),
),
tooltip: "10 Seconds",
onPressed: _isPlayerReady
? () => rewindTo()
: null,
),
IconButton(
icon: Icon(
_controller.value.isPlaying
? Icons.pause
: Icons.play_arrow,
),
onPressed: _isPlayerReady
? () {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
setState(() {});
}
: null,
),
IconButton(
icon: ImageIcon(
AssetImage("assets/icons/Forward.png"),
//color: Color(0xFF3A5A98),
),
tooltip: "10 Seconds",
onPressed: _isPlayerReady
? () => seekTo()
: null,
),
IconButton(
icon: Icon(_muted ? Icons.volume_off : Icons.volume_up),
onPressed: _isPlayerReady
? () {
_muted
? _controller.unMute()
: _controller.mute();
setState(() {
_muted = !_muted;
});
}
: null,
),
FullScreenButton(
controller: _controller,
color: kRedColor,
),
],
),
_space,
Row(
children: <Widget>[
const Text(
"Volume",
style: TextStyle(fontWeight: FontWeight.w300),
),
Expanded(
child: Slider(
activeColor: kRedColor,
inactiveColor: Colors.transparent,
value: _volume,
min: 0.0,
max: 100.0,
divisions: 10,
label: '${(_volume).round()}',
onChanged: _isPlayerReady
? (value) {
setState(() {
_volume = value;
});
_controller.setVolume(_volume.round());
}
: null,
),
),
],
),
_space,
AnimatedContainer(
duration: const Duration(milliseconds: 800),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: _getStateColor(_playerState),
),
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.fromLTRB(80,8,80,8),
child: Text(
_playerState.toString(),
style: const TextStyle(
fontWeight: FontWeight.w600,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
_space,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: new Text("إذا واجهت بطأً في تحميل الفيديو، قم بإغلاق راوتر الإنترنت من ٣ إلى ٥ دقائق ثم أعد تشغيله",
textAlign: TextAlign.right,
style: TextStyle(fontWeight: FontWeight.w500),
),
)
],
),
],
),
),
],
),
),
),
),
),
),
WaterMarkWidget(
text: widget.UsrX,
),
],/////////////
);
}
Note that:
The stack here to show watermark over the videos
finally I add container to try to make it in screen center, but failed
Container( height: MediaQuery.of(context).size.height * 1, width: MediaQuery.of(context).size.width * 1,
