Square Camera overlay using flutter

Question

create the square overlay above the camera

I have tried the sample project given in https://github.com/flutter/plugins/tree/master/packages/camera

https://github.com/flutter/plugins/blob/master/packages/camera/lib/camera.dartenter image description here

Answer 1

As of now, there is no built-in support for camera overlay in the library that you are using. I have created a widget that sits in the stack with CameraPreview that replicates the overlay.

@override
  Widget build(BuildContext context) {
    return AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: Stack(fit: StackFit.expand, children: [
            CameraPreview(_controller),
            cameraOverlay(
                padding: 50, aspectRatio: 1, color: Color(0x55000000))
          ]));
}

Widget cameraOverlay({required double padding, required double aspectRatio, required Color color}) {
    return LayoutBuilder(builder: (context, constraints) {
      double parentAspectRatio = constraints.maxWidth / constraints.maxHeight;
      double horizontalPadding;
      double verticalPadding;

      if (parentAspectRatio < aspectRatio) {
        horizontalPadding = padding;
        verticalPadding = (constraints.maxHeight -
                ((constraints.maxWidth - 2 * padding) / aspectRatio)) /
            2;
      } else {
        verticalPadding = padding;
        horizontalPadding = (constraints.maxWidth -
                ((constraints.maxHeight - 2 * padding) * aspectRatio)) /
            2;
      }
      return Stack(fit: StackFit.expand, children: [
        Align(
            alignment: Alignment.centerLeft,
            child: Container(width: horizontalPadding, color: color)),
        Align(
            alignment: Alignment.centerRight,
            child: Container(width: horizontalPadding, color: color)),
        Align(
            alignment: Alignment.topCenter,
            child: Container(
                margin: EdgeInsets.only(
                    left: horizontalPadding, right: horizontalPadding),
                height: verticalPadding,
                color: color)),
        Align(
            alignment: Alignment.bottomCenter,
            child: Container(
                margin: EdgeInsets.only(
                    left: horizontalPadding, right: horizontalPadding),
                height: verticalPadding,
                color: color)),
        Container(
          margin: EdgeInsets.symmetric(
              horizontal: horizontalPadding, vertical: verticalPadding),
          decoration: BoxDecoration(border: Border.all(color: Colors.cyan)),
        )
      ]);
    });
  }

Answer 2

please use this package camera_camera
https://pub.dev/packages/camera_camera
api reference : https://pub.dev/documentation/camera_camera/latest/
github : https://github.com/gabulsavul/camera_camera
for code detail you need https://github.com/gabulsavul/camera_camera/blob/master/lib/page/camera.dart

As the package describe, you can add Rectangle , Circle or Square Focus
see code snippet below

Camera(
       mode: CameraMode.normal,
      imageMask: CameraFocus.rectangle(
                color: Colors.black.withOpacity(0.5),
                ),
     )