How to make the Chewie video player responsive

I've tried to place inside SizedBox, also use AspectRatio property but it does not working properly. If I can adjust the size to suit on mobile devices, it won't be responsive on tablet. This code is placed inside a Column

Chewie(
  controller: chewieController,
),

This is how it's declared:

 videoPlayerController = VideoPlayerController.network(
        "https://player.vimeo.com/progressive_redirect/playback/738271412/rendition/1080p/file.mp4?loc=external&signature=b4ac532ca6f446de3a53ba9e29a5d7e54f3bca0acb5ae61528a44d75222a0ef8");

    //videoPlayerController.initialize();

    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      autoPlay: true,
      looping: false,
    );

CodePudding user response：

Try put your widget into Expanded widget:

Expanded(
    child: VideoPlayer(),
);

or into:

final screenSize = MediaQuery.of(context).size;

SizedBox(
    width: screenSize.width,
    height: screenSize.height,
    child: VideoPlayer(),
);

CodePudding user response：

I solved by adding SizedBox widget

SizedBox(
              width: 80.w,
              height: 40.w,
              child: Chewie(
                controller: chewieController,
              ),
            ),

and aspectRatio inside constructor

chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      autoPlay: true,
      aspectRatio: videoPlayerController.value.aspectRatio*2,
      looping: false,
    );

This is suited for my example, because the video width is twice bigger than the height, but it works perfectly.