Flutter youtube player iframe not working properly with full screen - flutter

Question

I am using youtube_player_iframe to play you tube video. It is working but if click the full screen button on player, It is only show small as shown in picture. It is not always happen but It is happen once in two to three time.
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:thitsarparami/blocs/bloc.dart';
import 'package:thitsarparami/helper/constants.dart';
import 'package:thitsarparami/helper/enum.dart';
import 'package:thitsarparami/ui/error/something_went_wrong.dart';
import 'package:thitsarparami/widgets/circular_progress_indicator_widget.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';
class VideoScreen extends StatefulWidget {
static const routeName = '/video';
const VideoScreen({Key? key}) : super(key: key);
#override
_VideoScreenState createState() => _VideoScreenState();
}
class _VideoScreenState extends State<VideoScreen> {
#override
void initState() {
super.initState();
_loadYoutube();
}
_loadYoutube() async {
List<String> codes = [
systemDataCodeToString(SystemDataCode.youtube_live),
];
BlocProvider.of<SystemDataBloc>(context).add(GetYoutubeLiveEvent(codes));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
title: AutoSizeText(
kYouTubeChannel,
style: Theme.of(context).appBarTheme.titleTextStyle,
),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.arrow_back,
color: Theme.of(context).primaryIconTheme.color!,
),
),
),
body: BlocBuilder<SystemDataBloc, SystemDataState>(
builder: (context, state) {
if (state is SystemDataError) {
return const SomethingWentWrongScreen();
} else if (state is YoutubeLiveDataLoaded) {
return Column(
mainAxisSize: MainAxisSize.max,
children: [
MyYoutubePlayer(
videoId: state.systemData.youtubeLive!.videoId!,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
state.systemData.youtubeLive!.videoTitle!,
style: const TextStyle(
color: Colors.black,
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
)
],
);
}
return const CircularProgressIndicatorWidget();
},
),
);
}
}
class MyYoutubePlayer extends StatefulWidget {
final String videoId;
const MyYoutubePlayer({Key? key, required this.videoId}) : super(key: key);
#override
State<MyYoutubePlayer> createState() => _MyYoutubePlayerState();
}
class _MyYoutubePlayerState extends State<MyYoutubePlayer> {
late YoutubePlayerController _controller;
#override
void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: widget.videoId,
params: const YoutubePlayerParams(
showControls: true,
showFullscreenButton: true,
desktopMode: false,
privacyEnhanced: true,
useHybridComposition: true,
),
);
_controller.onEnterFullscreen = () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
};
_controller.onExitFullscreen = () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
};
}
#override
void dispose() {
_controller.close();
super.dispose();
}
#override
Widget build(BuildContext context) {
return YoutubePlayerIFrame(
controller: _controller,
aspectRatio: 16 / 9,
);
}
}

Answer 1

change this
Widget build(BuildContext context) {
return YoutubePlayerIFrame(
controller: _controller,
aspectRatio: 16 / 9,
);
}
to this
Widget build(BuildContext context) {
return YoutubePlayerScaffold(
autoFullScreen: true,
builder: ((context, player) {
return Container(
width: 100.w,
height: 100.h,
color: Colors.black,
child: Center(
child: player,
),
);
}),
controller: _controller
);
}
Fullscreen only works with YoutubePlayerScaffold Widget