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