android-cameraflutterios-camera

Flutter Camera Overlay


I've been doing some research for an upcoming project and would like to render the camera view behind a custom shape/semi-transparent img to act as a guide when taking pictures.

Does anyone know of a flutter camera plugin or tutorial that explains how to do this?


Solution

  • You can use the camera Plugin for flutter by the Flutter team.

    https://pub.dartlang.org/packages/camera

    and then position your image and you cameraview in a Stack Widget like this:

    return new Stack(
      alignment: FractionalOffset.center,
      children: <Widget>[
        new Positioned.fill(
          child: new AspectRatio(
              aspectRatio: controller.value.aspectRatio,
              child: new CameraPreview(controller)),
        ),
        new Positioned.fill(
          child: new Opacity(
            opacity: 0.3,
            child: new Image.network(
              'https://picsum.photos/3000/4000',
              fit: BoxFit.fill,
            ),
          ),
        ),
      ],
    );