Reputation: 307

Flutter youtube_player_flutter: ^7.0.0+6 full Screen

I am using this plugin youtube_player_flutter: ^7.0.0+6 for playing youtube video. The problem is that when I try to play the video in full screen landscape the video playing but gets cut from edges and covers the whole screen in landscape

here you can video is not covering full height and width

my code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class video extends StatefulWidget {
  @override
  _videoState createState() => _videoState();
}

class _videoState extends State<video> {
  String videoURL = "https://www.youtube.com/watch?v=oxsBSCf5-B8&list=RDoxsBSCf5-B8&start_radio=1";

  YoutubePlayerController _controller;

  @override
  void initState() {

    _controller = YoutubePlayerController(
        initialVideoId: YoutubePlayer.convertUrlToId(videoURL)
    );

    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            child:Column(
              crossAxisAlignment:CrossAxisAlignment.stretch,
              children: <Widget>[
                YoutubePlayerBuilder(
                  player: YoutubePlayer(
                    controller: _controller,
                    aspectRatio:16/9,

                    showVideoProgressIndicator: true,
                  ),
                builder:(context,player){
                    return Column(
                    children: <Widget>[
                     player
                    ],
                    );
                },
                ),
              ],
            ),
          ),
        ),
      ),


    );
  }
}

Upvotes: 12

Answers (8)

Yamini Chaudhary

Reputation: 1

In the YoutubePlayerBuilder, set the aspect ratio to 16/7. Wrap the YoutubePlayer widget inside a SizedBox to manually set the width and height for portrait mode.

YoutubePlayerBuilder(
  player: YoutubePlayer(
    controller: _youtubeController,
    aspectRatio: 16 / 7, // Set aspect ratio to 16/7
    // Other player configurations...
  ),
  builder: (context, player) => Scaffold(
      // Other Scaffold configurations...
      body:  SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: Get.width,
                    height: getVerticalSize(300), // Manually set height for portrait mode
                    child: player, // Wrap player inside SizedBox
                  ),
                  // Other widgets...
                ],
              ),
            ),

Upvotes: 0

Esraa Hamada

Reputation: 179

you can use YoutubePlayerBuilder like that, note I add it before scaffold can you add it after scaffold actually I don't try that before

YoutubePlayerBuilder(
    player: YoutubePlayer(
        controller: _controller,
    ),
    builder: (context, player){
        return Scaffold(
           body: SafeArea(
              child: Column(
                 children: [
                     player,
                     // any widget you want to add
                  ] 
              )
           )
        );
    ),
),

Upvotes: 0

RITTIK

Reputation: 926

you can try checking the orientation of the device using

MediaQuery.of(context).orientation == Orientation.landscape

and if it is in the landscape you can hide the app bar then

for complete example:

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: Scaffold(
          appBar: MediaQuery.of(context).orientation == Orientation.landscape
            ? null
            : AppBar(
            title: Text(App),
          ),
          body: youtube(),
        );
      }
    }),
  );
}

Upvotes: 0

Muhammet

Reputation: 446

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

Upvotes: 1

David Kiarie Macharia

Reputation: 289

If what you want to achieve is

Show Video on entire screen (Full-screen)
Show video widget on portrait together with other widget

here is how i fixed it

   child: OrientationBuilder(
    
    builder: (context, orientaion) {
     switch(orientaion){
       
       case Orientation.portrait:
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Theme.of(context).appBarTheme.color,
          appBar: AppBar(
            // title: Text(widget.video.title),
            title: Text(
              "Detail",
              style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
            ),
          ),
          body: Body);
  
         // TODO: Handle this case.
         break;
       case Orientation.landscape:
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Theme.of(context).appBarTheme.color,
         
          body: Body());
  
         // TODO: Handle this case.
         break;
     }
     
    }
  ),

Build Body based the orientation

bool fullScreen = false;

YoutubePlayerBuilder _buildBurnerWidgetContent() {
  return YoutubePlayerBuilder(
    onEnterFullScreen: () {
      this.fullScreen = true;
    },
    onExitFullScreen: () {
      this.fullScreen = false;
    },
    player: YoutubePlayer(
      aspectRatio: 16 / 9,
      controller: _youtubecontroller,
      showVideoProgressIndicator: true,
      onReady: () {},
      progressColors: ProgressBarColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
      ),
    ),
    builder: (context, player) {
      return Column(
        children: [
          // some widgets
          // player,
          //some other widgets
        ],
      );
    });

}

while building the body with different section i check screen orientation

import 'package:flutter/material.dart';

class Body extends StatefulWidget {
  @override
  _hhState createState() => _hhState();
}

class _hhState extends State<Body> {
  bool fullScreen;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Flexible(flex: 5, child: _buildBurnerWidgetContent()),
      !this.fullScreen
          ? Padding(padding: null, child: Text("description"))
          : Container(),
      !this.fullScreen
          ? Padding(padding: null, child: Text("TabView"))
          : Container(),
      !this.fullScreen
          ? Padding(padding: null, child: Text("comments"))
          : Container()
    ]));
  }

  _buildBurnerWidgetContent() {}
}

Upvotes: 5

Rutvik_110

Reputation: 66

So i too faced one similar issue like this and the solution is actually in their docs on the pub.dev itself. You need to add the youtubeplayerbuilder at the top of the widget tree and everything else like scaffold will be returned from it's builder method. https://pub.dev/packages/youtube_player_flutter enter image description here

Upvotes: 2

Vasyl

Reputation: 154

If to use ListView.separated, you can open the video to fullscreen

body: ListView.separated(
    itemBuilder: (context, index) {
      return YoutubePlayer(
        key: ObjectKey(_controllers[index]),
        controller: _controllers[index],
        actionsPadding: const EdgeInsets.only(left: 16.0),
        bottomActions: [
          CurrentPosition(),
          const SizedBox(width: 10.0),
          ProgressBar(isExpanded: true),
          const SizedBox(width: 10.0),
          RemainingDuration(),
          FullScreenButton(),
        ],
      );
    },
    itemCount: _controllers.length,
    separatorBuilder: (context, _) => const SizedBox(height: 10.0),
  ),
);

}

enter link description here

Upvotes: 1

Jayadev Haddadi

Reputation: 411

I had the same problem just now.
I tried this and it seems to work for full screen. Also added a OrientationBuilder for removing the AppBar in landscape mode only.\

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: _onWillPop,
    child: OrientationBuilder(builder: 
           (BuildContext context, Orientation orientation) {
      if (orientation == Orientation.landscape) {
        return Scaffold(
          body: youtubeHirarchy(),
        );
      } else {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: youtubeHirarchy(),
        );
      }
    }),
  );
}

youtubeHierarchy() {
  return Container(
    child: Align(
      alignment: Alignment.center,
      child: FittedBox(
        fit: BoxFit.fill,
        child: YoutubePlayer(
          controller: _controller,
        ),
      ),
    ),
  );
}

(onWillPop is there for pausing video when going back)
Seems to have the default menues of youtube behind the actual video. If you come up with a better solution please let me know.

Upvotes: 16

Flutter youtube_player_flutter: ^7.0.0+6 full Screen

Answers (8)

Build Body based the orientation

while building the body with different section i check screen orientation

Related Questions