How to set width and height for VideoPlayer in flutter web

Question

I am using VideoPlayer to play an .mp4 video that is uploaded to my website. I set the height and width and it works as I expect in Android, but in Flutter Web the width doesn't match the width of the container.

   Container(//      
      alignment: Alignment.center,
      margin: const EdgeInsets.only(top: 20),
      height: 130,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(8.0),
         color: Colors.black12, border: 
         Border.all(color: Colors.black)),
      child: SizedBox(width: double.infinity,
          child: ClipRRect(borderRadius:  
          BorderRadius.circular(8), 
          child: VideoPlayer(HomePage._controller1)
      )
     )
    ),

I need some trick to make my video full width or fit to it's parent.

Answer 1

I would prefer using AspectRation for this.

/// use on parent widget, the place you like to get width, 
/// most likely I prefer on Scaffold's body 
/// and then removing subtract the padding from maxWidth 
LayoutBuilder( 
  builder: (context, constraints) {
    final width = constraints.maxWidth;

    return AspectRatio(
      aspectRatio: width < 600 ? 1.5 : 2.0, //try different ration based on your preference
      child: Container( //your VideoPlayer
        color: Colors.red,
      ),
    );
  },
),