使用 MediaQuery Flutter 响应式纵横比

Question

我正在使用 Flutter better_player 中的视频播放器插件。设置运行良好，wrt 插件功能。我需要为插件设置一个aspect ratio 来调整自己的大小。我已经在下面的代码中完成了这个（对于我的设备）：

return Scaffold(
  body: AspectRatio(
    aspectRatio: 4.5/3,
    // aspectRatio: width / height * 0.35,
    child: BetterPlayer(
      key: _playerKey,
      controller: _controller,
    ),
  )
);

它在我的设备上运行良好，但在较小的屏幕（可能还有较大的外形尺寸）上，它无法正常缩放。在较小的设备上，视频播放器不会占用整个设备宽度。早先尝试使用popular aspect ratios like 3/2, 4/3 等无济于事，因为现在高度成为问题。

我尝试了另一种选择，即使用media query 使用对我有利的高度因子来计算纵横比，例如aspectRatio: width / height * 0.35,，但我不断收到此错误：

The method '/' was called on null.
Receiver: null
Tried calling: /(null)

当我尝试这个算术运算时会发生这种情况：width / height * 0.35。任何想法如何使用 MQ 为自适应用户界面构建纵横比？谢谢

完整代码：

class AkilahVideoPlayer extends StatefulWidget {
  @override
 _AkilahVideoPlayerState createState() => _AkilahVideoPlayerState();
}

class _AkilahVideoPlayerState extends State<AkilahVideoPlayer> {

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();
 }
}

Answer 1

您没有正确使用MediaQuery。在这里你可以像这样使用它：

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

这将为您提供适当的宽度和高度。