【Flutter 问题系列第 72 篇】在 Flutter 中使用 Camera 插件拍的图片被拉伸问题的解决方案

这是【Flutter 问题系列第 72 篇】，如果觉得有用的话，欢迎关注专栏。

Flutter SDK：2.5.0，Dart SDK：2.14，Android Studio ：2021.2.1 Pathc 1。

一：问题描述

项目中要自定义相机页，所以用到了官方提供的 Camera 插件，构建相机视图的代码如下

  /// 构建相机视图
  Widget _cameraView() {
    
    return CameraPreview(cameraController);
  }

不过在拍摄照片时，却出现了图像被拉伸的问题，如下图所示

经测试，虽然实际拍出来的效果是正常的，但这种像是开了长腿特效的情况并不是我们想要的，怎么解决这种问题呢？

二：解决方案

这里用到了 Transform 组件的 scale 属性，求得相机纵横比与设备像素比的比例，当作 Transform 的缩放比即可，修改后的代码如下所示

  /// 构建相机视图
  Widget _cameraView() {
    
  	// 设备尺寸
    final Size size = MediaQuery.of(context).size;
    // 设备像素比
    final double deviceRatio = size.width / size.height;
    // 相机纵横比
    final double aspectRatio = cameraController.value.aspectRatio;
    return Center(
      child: Transform.scale(
        scale: aspectRatio / deviceRatio,
        child: AspectRatio(
          aspectRatio: aspectRatio,
          child: Center(child: CameraPreview(cameraController)),
        ),
      ),
    );
  }

修改后的效果图如下

可以看到，图像没有再被拉伸了，good。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

---

结束语

Google 的 Flutter 越来越火，截止 2022年6月29日 GitHub 标星已达 142K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。