Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 enter image description here

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


    );
  }
}
like image 658
joshua Avatar asked Jul 01 '20 05:07

joshua


3 Answers

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.

like image 120
Jayadev Haddadi Avatar answered Oct 08 '22 21:10

Jayadev Haddadi


If what you want to achieve is

  1. Show Video on entire screen (Full-screen)

    Full -screen image

  2. Show video widget on portrait together with other widget

    Portrait

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() {}
}
like image 39
David Kiarie Macharia Avatar answered Oct 08 '22 19:10

David Kiarie Macharia


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

like image 1
Rutvik_110 Avatar answered Oct 08 '22 19:10

Rutvik_110