how to make flutter video player responsive?

Question

I was trying to make a webpage with a default video playing but in full screen it looks fine but when changing size it getting worst. Like this image how to fix this issue

class WelcomePage extends StatefulWidget {

VideoPlayerController? _videoCOntroller;

@override
void initState() {
super.initState();
  _videoCOntroller!.initialize().then((value) {
  _videoCOntroller!.play();
  _videoCOntroller!.setLooping(true);
});
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
  body: Column(
    children: [
      Stack(
        children: [
          Container(
            color: Colors.amber,
            height: size.height,
            width: size.width,
            child: FittedBox(
              fit: BoxFit.cover,
              child: Container(
                height: size.height,
                width: size.width,
                child: VideoPlayer(_videoCOntroller!),
              ),
            ),
          
          ),
          Positioned(
            height: size.height,
            width: size.width,
            child: 
                child:
                                        
                           
                               

Solution 1

The problem was using stack inside a column just removing that could fic the issue

Solution 2

You set size.width to height of Container instead of size.height:

          child: Container(
            height: size.width,
            width: size.width,
            child: VideoPlayer(_videoCOntroller!),
          ),

And if changing that doesn't solve your problem. Change BoxFit.cover to BoxFit.fill.

Edit 1: I think this is a bug. The issue about Android will be solved with video_player 2.1.6 but I don't know the situation of web. You may want to checkout this issue on github

Comments

[MhdBasilE]

i do both of it and no change at all