How can you "center crop" a Widget in Flutter?

Question

I have a VideoPlayer widget that needs to be fullscreen and also fit the aspect ratio of the source video. In order to achieve that, I'll need to chop off either the top/bottom or the left/right of the video.

I had hoped the following might achieve this, but I think I must be using FittedBox incorrectly as it causes my VideoPlayer to disappear:

final Size size = controller.value.size;
return new FittedBox(
  fit: BoxFit.cover,
  child: new AspectRatio(
    aspectRatio: size.width / size.height,
    child: new VideoPlayer(controller)
  ),
);

Can anyone help me solve this? 🙏

Answer 1

Finally solved it. There were a few missing pieces:

1. I needed an OverflowBox with no restrictions so that my child could grow as large as needed.
2. I needed the child of FittedBox to actually enforce a size to stop the layout system from crashing.
3. Now that my widget will paint outside of its bounds, we also want to put a ClipRect in there to stop this from happening.

final Size size = controller.value.size;
return new ClipRect(
  child: new OverflowBox(
    maxWidth: double.infinity,
    maxHeight: double.infinity,
    alignment: Alignment.center,
    child: new FittedBox(
      fit: BoxFit.cover,
      alignment: Alignment.center,
      child: new Container(
        width: size.width,
        height: size.height,
        child: new VideoPlayer(controller)
      )
    )
  )
);

Answer 2

Starting with the above solution I came up with this:

final Size size = _controller.value.size;
return Container(
  color: Colors.lightBlue,
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.width,
  child: FittedBox(
           alignment: Alignment.center,
       fit: BoxFit.fitWidth,
       child: Container(
         width: size.width,
         height: size.height,
         child: VideoPlayer(_controller))),
      ),
)

The inner Container provides the size for the Texture inside the VideoPlayer.