flutter中使用camera 插件内容被拉伸的处理

日常记录.
业务开发中有一个需求,开始直播前有一个全屏预览直播页面,设置相关的直播信息,页面背景是当前摄像头的内容.使用了flutter的camera插件来获取相机实时内容.
此处集成完插件后,出现一个问题,相机内容在我的小屏幕手机(iPhone 6s)上内容显示正常,在刘海屏内显示人物被拉伸,安卓大屏机也是.
原先显示摄像头内容的代码如下:

return AspectRatio(
        aspectRatio: _cameraController.value.aspectRatio,
        child: Container(
          color: Colors.black,
          child: Center(child: CameraPreview(_cameraController)),
        ),
      );

开始用了AspectRatio组件,根据cameraController的previewsize长宽比aspectRatio设置要显示的内容.大屏手机长宽比太大,导致显示的内容被拉伸.

此处在修复这个问题中使用了Transform组件,这个组件的作用Creates a widget that transforms its child.也就是改变它的字组件的缩放比例.
主要是用到了他的scale方法

Transform.scale({
    Key? key,
    required double scale, //要设置的尺寸
    this.origin,   //原来的尺寸
    this.alignment = Alignment.center, //缩放的原点
    this.transformHitTests = true,
    Widget? child,   //要缩放的组件
  }) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
       super(key: key, child: child);

修改后的代码如下:

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
return Stack(children: <Widget>[
            Center(
              child: Transform.scale(
                scale: _cameraController.value.aspectRatio / deviceRatio,
                child: AspectRatio(
                  aspectRatio: _cameraController.value.aspectRatio,
                  child: Center(child: CameraPreview(_cameraController)),
                ),
              ),
            ),
          ]);

参考:https://www.it1352.com/2087528.html