use the new widget in the sample

Author: navaronbracke

example/lib/barcode_scanner_window.dart

@@ -44,7 +44,7 @@ class _BarcodeScannerWithScanWindowState
             },
           ),
           BarcodeOverlay(controller: controller, boxFit: boxFit),
-          ScannerOverlay(
+          ScanWindowOverlay(
             scanWindow: scanWindow,
             controller: controller,
           ),

example/lib/mobile_scanner_overlay.dart

@@ -57,12 +57,14 @@ class _BarcodeScannerWithOverlayState extends State<BarcodeScannerWithOverlay> {
             builder: (context, value, child) {
               if (!value.isInitialized ||
                   !value.isRunning ||
-                  value.error != null) {
+                  value.error != null ||
+                  scanWindow.isEmpty) {
                 return const SizedBox();
               }
 
-              return CustomPaint(
-                painter: ScannerOverlay(scanWindow: scanWindow),
+              return ScanWindowOverlay(
+                controller: controller,
+                scanWindow: scanWindow,
               );
             },
           ),
@@ -90,67 +92,3 @@ class _BarcodeScannerWithOverlayState extends State<BarcodeScannerWithOverlay> {
     await controller.dispose();
   }
 }
-
-class ScannerOverlay extends CustomPainter {
-  const ScannerOverlay({
-    required this.scanWindow,
-    this.borderRadius = 12.0,
-  });
-
-  final Rect scanWindow;
-  final double borderRadius;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    // TODO: use `Offset.zero & size` instead of Rect.largest
-    // we need to pass the size to the custom paint widget
-    final backgroundPath = Path()..addRect(Rect.largest);
-
-    final cutoutPath = Path()
-      ..addRRect(
-        RRect.fromRectAndCorners(
-          scanWindow,
-          topLeft: Radius.circular(borderRadius),
-          topRight: Radius.circular(borderRadius),
-          bottomLeft: Radius.circular(borderRadius),
-          bottomRight: Radius.circular(borderRadius),
-        ),
-      );
-
-    final backgroundPaint = Paint()
-      ..color = Colors.black.withOpacity(0.5)
-      ..style = PaintingStyle.fill
-      ..blendMode = BlendMode.dstOut;
-
-    final backgroundWithCutout = Path.combine(
-      PathOperation.difference,
-      backgroundPath,
-      cutoutPath,
-    );
-
-    final borderPaint = Paint()
-      ..color = Colors.white
-      ..style = PaintingStyle.stroke
-      ..strokeWidth = 4.0;
-
-    final borderRect = RRect.fromRectAndCorners(
-      scanWindow,
-      topLeft: Radius.circular(borderRadius),
-      topRight: Radius.circular(borderRadius),
-      bottomLeft: Radius.circular(borderRadius),
-      bottomRight: Radius.circular(borderRadius),
-    );
-
-    // First, draw the background,
-    // with a cutout area that is a bit larger than the scan window.
-    // Finally, draw the scan window itself.
-    canvas.drawPath(backgroundWithCutout, backgroundPaint);
-    canvas.drawRRect(borderRect, borderPaint);
-  }
-
-  @override
-  bool shouldRepaint(ScannerOverlay oldDelegate) {
-    return scanWindow != oldDelegate.scanWindow ||
-        borderRadius != oldDelegate.borderRadius;
-  }
-}

lib/src/overlay/barcode_overlay.dart

@@ -44,7 +44,9 @@ class BarcodeOverlay extends StatelessWidget {
             final BarcodeCapture? barcodeCapture = snapshot.data;
 
             // No barcode or preview size.
-            if (barcodeCapture == null || barcodeCapture.size.isEmpty || barcodeCapture.barcodes.isEmpty) {
+            if (barcodeCapture == null ||
+                barcodeCapture.size.isEmpty ||
+                barcodeCapture.barcodes.isEmpty) {
               return const SizedBox();
             }
 

lib/src/overlay/barcode_painter.dart

@@ -34,7 +34,9 @@ class BarcodePainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    if (barcodeCorners.isEmpty || barcodeSize.isEmpty || cameraPreviewSize.isEmpty) {
+    if (barcodeCorners.isEmpty ||
+        barcodeSize.isEmpty ||
+        cameraPreviewSize.isEmpty) {
       return;
     }
 
@@ -54,8 +56,10 @@ class BarcodePainter extends CustomPainter {
       horizontalPadding = 0;
     }
 
-    final double ratioWidth = cameraPreviewSize.width / adjustedSize.destination.width;
-    final double ratioHeight = cameraPreviewSize.height / adjustedSize.destination.height;
+    final double ratioWidth =
+        cameraPreviewSize.width / adjustedSize.destination.width;
+    final double ratioHeight =
+        cameraPreviewSize.height / adjustedSize.destination.height;
 
     final List<Offset> adjustedOffset = [
       for (final offset in barcodeCorners)

lib/src/overlay/scan_window_overlay.dart

@@ -69,7 +69,10 @@ class ScanWindowOverlay extends StatelessWidget {
       valueListenable: controller,
       builder: (context, value, child) {
         // Not ready.
-        if (!value.isInitialized || !value.isRunning || value.error != null || value.size.isEmpty) {
+        if (!value.isInitialized ||
+            !value.isRunning ||
+            value.error != null ||
+            value.size.isEmpty) {
           return const SizedBox();
         }