How to BoxFit.cover a fullscreen VideoPlayer widget with specific aspect ratio
Using the video_player
package, the initial setup is:
VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller =
VideoPlayerController.asset("assets/video/home_background.mp4")
..initialize().then((value) => {setState(() {})});
_controller.setLooping(true);
_controller.setVolume(0.0);
_controller.play();
}
and then, in your widget tree:
Stack(
children: <Widget>[
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: _controller.value.size?.width ?? 0,
height: _controller.value.size?.height ?? 0,
child: VideoPlayer(_controller),
),
),
),
//FURTHER IMPLEMENTATION
],
)
Old question, answering for reference. This is an open issue on Flutter (as of 2020/04/23) : https://github.com/flutter/flutter/issues/31911
Good workaround is provided in the comments of the issue, using a SizedBox instead of an AspectRatio. Your code would be like this :
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: _aspectRatio,
height: 1,
child: VideoPlayer(_playerController),
),
),
_buildText(),
],
);
}