如何设置 Flutter CameraPreview 大小“全屏”答案

【问题标题】：How to set Flutter CameraPreview Size "Fullscreen"如何设置 Flutter CameraPreview 大小“全屏”
【发布时间】：2019-06-24 11:25:56
【问题描述】：

我正在使用 CameraPreview 测量物体的高度，但问题是我无法将 cameraPreview 高度设置为全屏..

我试过定位小部件，它填满了屏幕，但图像被拉伸了。我试过Transform Widget，但是高度没有填满全屏，空白即将到来。图像没有被拉伸。

我的代码：

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;

return Stack(
            children: <Widget>[
              Transform.scale(
                scale: controller.value.aspectRatio/deviceRatio,
                child: new AspectRatio(
                  aspectRatio: controller.value.aspectRatio,
                  child: new CameraPreview(controller),
                ),
              ),);

请帮助我在没有图像拉伸的情况下安装 CameraPreview “FULLSCREEN”..

【问题讨论】：

看看这个。可能会有所帮助：stackoverflow.com/a/59456849/4329236

标签： android flutter flutter-layout

【解决方案1】：

自0.7.0以来，CameraValue.aspectRatio 返回宽度/高度而不是高度/宽度，并且 CameraPreview 现在自己处理 AspectRatio，因此 imo 的工作代码 sn-p 如下：

/// only work inside WidgetsApp or MaterialApp, which introduces a MediaQuery
final scale = 1 / (controller.value.aspectRatio * MediaQuery.of(context).size.aspectRatio);
return Transform.scale(
  scale: scale,
  alignment: Alignment.topCenter,
  child: CameraPreview(controller),
);

更新：

在通过变换缩放后，在TransitionRoute 中使用时，预览可能会超出屏幕尺寸限制。（当托管在 CupertinoPageRoute 中时，拖动手势会清楚地显示这一点）。

所以我认为剪辑预览以使其与屏幕尺寸完全匹配是个好主意。

final mediaSize = MediaQuery.of(context).size;
final scale = 1 / (controller.value.aspectRatio * mediaSize.aspectRatio);
return ClipRect(
  clipper: _MediaSizeClipper(mediaSize),
  child: Transform.scale(
    scale: scale,
    alignment: Alignment.topCenter,
    child: CameraPreview(controller),
  ),
);
class _MediaSizeClipper extends CustomClipper<Rect> {
  final Size mediaSize;
  const _MediaSizeClipper(this.mediaSize);
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, mediaSize.width, mediaSize.height);
  }
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}

【讨论】：

这应该是公认的答案。实际上，将预览大小从相机剪辑到设备屏幕大小是有意义的。我见过的所有方法实际上都没有遵循裁剪到屏幕大小的想法。非实际上对我有用，但这个。谢谢大佬。

【解决方案2】：

问题已通过在 Transform 小部件中包装 Center 小部件解决

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

【讨论】：

嗨，您能否编辑您的答案，使其看起来与您在本文中“显示相机预览”部分中所写的相同：medium.com/@navinkumar0118/…
根据文章及以上代码片段测试，图像被拉伸，主要图像部分根本没有显示。

【解决方案3】：

我关注https://flutter.dev/docs/cookbook/plugins/picture-using-camera的演示

而且我没有自定义 CameraPreview 的 AspectRatio（实际上我做了但它不起作用）。

我解决的方法很简单。

return Stack(
  children: [
    Container(
        width: double.infinity,
        height: double.infinity,
        child: CameraPreview(_cameraController))
  ],
);

我正在使用 Container 小部件的属性宽度和高度来使 CameraPreview 拉伸为全屏。

【讨论】：

这可能会导致预览拉伸。
并且 double.infinity 在该演示中的任何地方都没有使用
@JoeMuller 我按照演示实现了 Camera 小部件以及包含 CameraPreview 小部件的 Container 小部件的自定义宽度和高度。请仔细阅读。
@Benjamin 因为问题是如何将 CameraPreview 拉伸为全屏。

【解决方案4】：

final mediaSize = MediaQuery.of(context).size;
return Transform.scale(
scale: 1 /
(cameraController.value.aspectRatio  * mediaSize.aspectRatio),
alignment: Alignment.center,
child: CameraPreview(cameraController),);

【讨论】：

欢迎来到 Stack Overflow。没有任何解释的代码转储很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请edit您的问题并解释它如何回答所提出的具体问题。见How to Answer。

【解决方案5】：

此代码适用于 Flutter 2.8 及更高版本

return Stack(
  children: [
    Positioned(
      top: 0,
      bottom: 0,
      child: CameraPreview(_cameraController!),
    ),
  ],
);

【讨论】：