youtube_player_flutter
youtube_player_flutter copied to clipboard
sarbagyastha
Youtube Player Flutter changes the orientation on FullScreenButton pressed
When I tap on FullScreenButton() the orientation of the app changes to landscape mode. I want only the specific video to change into landscape mode and cover the whole screen. I tried to implement it by making an iconbutton and navigating to full screen widget separately created but then the controller doesn't sync. How can I achieve a fullscreen video?
final _apiController = Get.find<ApiController>();
class HomeBody extends StatefulWidget {
const HomeBody({Key? key}) : super(key: key);
@override
_HomeBodyState createState() => _HomeBodyState();
}
class _HomeBodyState extends State<HomeBody> {
// Player state
Map<String, dynamic> cStates = {};
@override
Widget build(BuildContext context) {
return Obx(
() => Padding(
padding: const EdgeInsets.only(
top: 5.0, bottom: 5.0, left: 10.0, right: 10.0),
child: ListView.builder(
itemCount: _apiController.kkk.value.length,
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemBuilder: (context, index) {
//
YoutubePlayerController _ytController =
_apiController.kkk.value[index].url;
//
String _title = _apiController.kkk.value[index].title;
//
String _id = YoutubePlayer.convertUrlToId(
_apiController.kkk.value[index].urlString)!;
// Adding Listener to controller
_ytController.addListener(
() {
// print('for $_id got isPlaying state ${_ytController.value.isPlaying}');
if (cStates[_id] != _ytController.value.isPlaying) {
if (mounted) {
setState(() {
cStates[_id] = _ytController.value.isPlaying;
});
}
}
},
);
// Switch title widget On/Off
Widget _titleContainer = _titleWidget(title: _title);
if (cStates[_id] != null) {
_titleContainer = cStates[_id]
? Container()
: _titleWidget(title: _title);
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
// height: 220.0,
decoration: BoxDecoration(
color: const Color(0xfff5f5f5),
borderRadius:
const BorderRadius.all(Radius.circular(12)),
boxShadow: [
BoxShadow(
color: Colors.grey.shade400,
spreadRadius: 2,
blurRadius: 3,
),
],
),
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(12)),
child: YoutubePlayer(
aspectRatio: 16 / 9,
controller: _ytController,
showVideoProgressIndicator: true,
progressIndicatorColor:
Colors.lightBlueAccent,
bottomActions: [
CurrentPosition(),
ProgressBar(isExpanded: true),
// ---------------------> Potential ERROR
FullScreenButton(),
// IconButton(
// onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => FullScreen2(
// fullScreenYTController:
// _ytController,
// playVideo: () {
// print('Oka');
// _ytController.play();
// },
// ),
// ),
// ).then(
// (value) {
// print('Then');
// _ytController.pause();
// _ytController.reload();
// },
// );
// },
// icon: const Icon(
// Icons.fullscreen,
// color: Colors.white,
// ),
// ),
],
onReady: () {
print('onReady for $index');
},
onEnded: (YoutubeMetaData _md) {
_ytController
.seekTo(const Duration(seconds: 0));
_ytController.pause();
},
),
),
),
///------- Headline
_titleContainer,
],
),
);
},
),
),
);
}
}
Guys have u Read documentation properly
go to Readme and check this section
For FullScreen Support If fullscreen support is required, wrap your player with YoutubePlayerBuilder
YoutubePlayerBuilder( player: YoutubePlayer( controller: _controller, ), builder: (context, player){ return Column( children: [ // some widgets player, //some other widgets ], ); ), ),
