Flutter

Question

我想添加一个半透明的 png /assets/overlay.png 作为 CameraPreview 的叠加层，以便引导用户拍摄他们需要拍摄的内容，但我正在努力。下面是当前CameraPreview的纯代码。

    Widget _buildCameraPreview() {
    if (_controller != null && _controller.value.isInitialized) {
      return Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          _buildImages(),
          Expanded(
            child: Card(
              elevation: 10,
              child: Padding(
                padding: const EdgeInsets.all(2.0),
                child: AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: CameraPreview(_controller),
                ),
              ),
            ),
          ),
        ],
      );
    }
    return FittedBox();
  }

关于如何添加这样的叠加层有什么想法吗？ .gif 也可以吗？

附加问题 - 如何在预览中只添加一条水平红线？谢谢！

Answer 1

使用 Stack 小部件在“相机预览”屏幕上覆盖您的图像

 Stack(children: <Widget>[
                     Transform.scale(
                              scale: _controller.value.aspectRatio / deviceRatio,
                              child: Center(
                                child: AspectRatio(
                                  aspectRatio: _controller.value.aspectRatio,
                                  child: CameraPreview(_controller),
                                ),
                              )),

            Align( alignment: Alignment.bottomCenter,
                     child: Image( image: new AssetImage( "assets/overlay.png",),) ),
         ]);

Flutter - 相机添加叠加层

Flutter - Camera Add Overlay

camera

dart