How would I have a video fill the screen without stretching (using Chewie or similar)? How would I have a video fill the screen without stretching (using Chewie or similar)? dart dart

How would I have a video fill the screen without stretching (using Chewie or similar)?


    // an arbitrary value, this can be whatever you need it to be    double videoContainerRatio = 0.5;    double getScale() {      double videoRatio = _videoPlayerController.value.aspectRatio;           if (videoRatio < videoContainerRatio) {      ///for tall videos, we just return the inverse of the controller aspect ratio        return videoContainerRatio / videoRatio;      } else {        ///for wide videos, divide the video AR by the fixed container AR        ///so that the video does not over scale        return videoRatio / videoContainerRatio;      }    }
  1. Place an AspectRatio as high as you can in your widget tree, possibly directly above Chewie. This will determine the bounds of the video.

    AspectRatio(  aspectRatio: videoContainerRatio,  child: Chewie(...),)
  2. Wrap Chewie in a Stack().

  3. Now wrap your Chewie in a new AspectRatio and set its ratio to the _videoPlayerController aspect ratio:

    AspectRatio(  aspectRatio: videoContainerRatio,  child: Stack(     children: <Widget>[       AspectRatio(         aspectRatio: _videoPlayerController ,         child: Chewie(...),       ),   ]),
  4. Now wrap the new AspectRatio in a Transform.scale() like this:

    Transform.scale(  scale: getScale(),  child: AspectRatio(     aspectRatio: _videoPlayerController ,     child: Chewie(...),  ),);


I think its because your video just doesn't fit right into the width and height of your screen aspect ration. If you just use

aspectRatio: _videoPlayerController.value.aspectRatio,

you will see the width and height of your video.

You could maybe wrap the Chewie in a Container with a fixed height/width and play with the aspect ration. You will need to stretch it to fit your entire screen i guess.