Square Camera overlay using flutter Square Camera overlay using flutter flutter flutter

Square Camera overlay using flutter


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),                ),     )

enter image description hereenter image description here


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({double padding, double aspectRatio, 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)),        )      ]);    });  }

enter image description here