Youtube Player Flutter changes the orientation on FullScreenButton pressed

[rajaarav0]

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,
                          ],
                        ),
                      );
                    },
                  ),
      ),
    );
  }
}

[rahulkhot108]

Please, I need a solution for the same issue

[bawantha]

Any solution

[alexaung]

same problem happening.

[infa-pthimmap]

Any solution??

[patelnandan]

Anyone have solution of this ?

[jsmeke]

I have the same issue. Any solution???

[AnkitFlutterDev]

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 ], ); ), ),