Flutter - Camera Add Overlay

Question

I would like to add a semi-transparent png /assets/overlay.png as an overlay to the CameraPreview, so users are guided what they need to photograph, but I am struggling. Below is the pure code for the current 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();
  }

Any ideas on how to add such an overlay? Would a .gif also work?

Additional question - how to just add a single horizontal red line on the preview? Thanks!

Answer 1

Use Stack Widget to overay your image on Camera Preview screen

 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",),) ),
         ]);