flutter - Flutter - 相机添加叠加

Question

我想在 CameraPreview 中添加一个半透明的 png/assets/overlay.png作为叠加层，以便指导用户拍摄他们需要拍摄的内容，但我很挣扎。下面是当前 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(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",),) ),
         ]);