title: Flutter Responsive Aspect Ratio With MediaQuery
body: <p>I am using a video player plugin in flutter <a href="https://pub.dev/packages/better_player" rel="nofollow noreferrer">better_player</a>. The setup works well, wrt the plugin functionalities. I am required to setup an <code>aspect ratio</code> for the plugin to size itself. I have done this in code like below (for my device):</p>
  <pre><code>return Scaffold(
    body: AspectRatio(
      aspectRatio: 4.5/3,
      // aspectRatio: width / height * 0.35,
      child: BetterPlayer(
        key: _playerKey,
        controller: _controller,
      ),
    )
  );
  </code></pre>
  <p>It works great on my device but on smaller screens (and possibly larger form factors), it doesn't scale properly. On smaller devices, the video player doesn't take up the full device width. Had earlier tried using <code>popular aspect ratios like 3/2, 4/3</code> etc to no avail as the height now became an issue.</p>
  <p>I tried one more option, which is to use <code>media query</code> to calculate the aspect ratio using a height factor favorable to me such as <code>aspectRatio: width / height * 0.35,</code> but I keep getting this error:</p>
  <pre><code>The method '/' was called on null.
  Receiver: null
  Tried calling: /(null)
  </code></pre>
  <p>This occurs when I'm trying to this arithmetic operation : <code>width / height * 0.35</code>. Any ideas how to build the aspect ratio using MQs for adaptive user interfaces? Thanks</p>
  <p>Full Code:</p>
  <pre><code>class AkilahVideoPlayer extends StatefulWidget {
    @override
   _AkilahVideoPlayerState createState() =&gt; _AkilahVideoPlayerState();
  }
  
  class _AkilahVideoPlayerState extends State&lt;AkilahVideoPlayer&gt; {
  
  BetterPlayerDataSource _dataSource;
  BetterPlayerController _controller;
  
  final _playerKey = GlobalKey();
  var height, width;
  
  @override
  void initState() {
    super.initState();
  
    print('ar in initState() of screen\t${width ~/ height * 0.35}');
    // print('ar in initState() of screen\t${width~/height * 0.35}');
  
    _dataSource = BetterPlayerDataSource(
        BetterPlayerDataSourceType.network,
        sampleVideoOne,
        notificationConfiguration: BetterPlayerNotificationConfiguration(
          showNotification: true,
          title: 'Big Buck Bunny',
          // imageUrl: 'assets/big_buck_bunny.jpg',
          author: 'Akilah',
        )
     );
  
     _controller = BetterPlayerController(
        BetterPlayerConfiguration(
          fit: BoxFit.cover,
          aspectRatio: 4.5/3,
          // aspectRatio: width / height * 0.35,
          // aspectRatio: 4/3,
          autoPlay: false,
          showPlaceholderUntilPlay: true,
          controlsConfiguration: BetterPlayerControlsConfiguration(
              enableMute: true,
              enableOverflowMenu: true,
              overflowMenuIcon: const IconData(0xe146, fontFamily: 'MaterialIcons',),
             showControlsOnInitialize: false,
             playerTheme: BetterPlayerTheme.material,
             enableProgressText: true
          ),
          placeholder: Image.asset('assets/big_buck_bunny.jpg', fit: BoxFit.cover,),
      ),
         betterPlayerDataSource: _dataSource
      );
  
     _controller.enablePictureInPicture(_playerKey);
   }
  
   @override
   Widget build(BuildContext context) {
  
     width = MediaQuery.of(context).size.width;
     height = MediaQuery.of(context).size.height;
  
    // print('ar in build() of screen\t${width / height * 0.35}');
  
    return Scaffold(
      body: AspectRatio(
        // aspectRatio: 4.5/3,
        aspectRatio: width / height * 0.35,
        child: BetterPlayer(
          key: _playerKey,
          controller: _controller,
        ),
      )
     );
   }
  
   @override
   void dispose() {
     super.dispose();
    _controller.dispose();
   }
  }
  </code></pre>