scanner with overlay screen added

@@ -155,7 +155,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {

 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

@@ -51,5 +51,10 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NSCameraUsageDescription</key>
+	<string>This app needs camera access to scan QR codes</string>
+
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>This app needs photos access to get QR code from photo library</string>
 </dict>
 </plist>

@@ -6,6 +6,7 @@ import 'package:mobile_scanner_example/barcode_scanner_returning_image.dart';
 import 'package:mobile_scanner_example/barcode_scanner_window.dart';
 import 'package:mobile_scanner_example/barcode_scanner_without_controller.dart';
 import 'package:mobile_scanner_example/barcode_scanner_zoom.dart';
+import 'package:mobile_scanner_example/mobile_scanner_overlay.dart';
 
 void main() => runApp(const MaterialApp(home: MyHome()));
 
@@ -95,6 +96,16 @@ class MyHome extends StatelessWidget {
               },
               child: const Text('MobileScanner pageView'),
             ),
+            ElevatedButton(
+              onPressed: () {
+                Navigator.of(context).push(
+                  MaterialPageRoute(
+                    builder: (context) => BarcodeScannerWithOverlay(),
+                  ),
+                );
+              },
+              child: const Text('MobileScanner with Overlay'),
+            ),
           ],
         ),
       ),

-//TODO: Create example with scanner overlay
 
 // import 'dart:ui';
-//
+
 // import 'package:flutter/material.dart';
 // import 'package:mobile_scanner/mobile_scanner.dart';
-//
+
 // void main() {
 //   runApp(const AnalyzeView());
 // }
-//
+
 // class AnalyzeView extends StatefulWidget {
 //   const AnalyzeView({Key? key}) : super(key: key);
-//
+
 //   @override
 //   _AnalyzeViewState createState() => _AnalyzeViewState();
 // }
-//
+
 // class _AnalyzeViewState extends State<AnalyzeView>
 //     with SingleTickerProviderStateMixin {
 //   List<Offset> points = [];
-//
+
 //   // CameraController cameraController = CameraController(context, width: 320, height: 150);
-//
+
 //   String? barcode;
-//
+
 //   @override
 //   Widget build(BuildContext context) {
 //     return MaterialApp(
@@ -34,7 +33,7 @@
 //               MobileScanner(
 //                   // fitScreen: false,
 //                   // controller: cameraController,
-//                   onDetect: (barcode, args) {
+//                   onDetect: (barcode) {
 //                 if (this.barcode != barcode.rawValue) {
 //                   this.barcode = barcode.rawValue;
 //                   if (barcode.corners != null) {
@@ -92,21 +91,21 @@
 //       ),
 //     );
 //   }
-//
+
 //   @override
 //   void dispose() {
 //     // cameraController.dispose();
 //     super.dispose();
 //   }
-//
+
 //   void display(Barcode barcode) {
 //     Navigator.of(context).popAndPushNamed('display', arguments: barcode);
 //   }
 // }
-//
+
 // class OpenPainter extends CustomPainter {
 //   final List<Offset> points;
-//
+
 //   OpenPainter(this.points);
 //   @override
 //   void paint(Canvas canvas, Size size) {
@@ -116,11 +115,11 @@
 //     //draw points on canvas
 //     canvas.drawPoints(PointMode.points, points, paint1);
 //   }
-//
+
 //   @override
 //   bool shouldRepaint(CustomPainter oldDelegate) => true;
 // }
-//
+
 // class OpacityCurve extends Curve {
 //   @override
 //   double transform(double t) {
@@ -133,96 +132,199 @@
 //     }
 //   }
 // }
-//
-// // import 'package:flutter/material.dart';
-// // import 'package:flutter/rendering.dart';
-// // import 'package:mobile_scanner/mobile_scanner.dart';
-// //
-// // void main() {
-// //   debugPaintSizeEnabled = false;
-// //   runApp(HomePage());
-// // }
-// //
-// // class HomePage extends StatefulWidget {
-// //   @override
-// //   HomeState createState() => HomeState();
-// // }
-// //
-// // class HomeState extends State<HomePage> {
-// //   @override
-// //   Widget build(BuildContext context) {
-// //     return MaterialApp(home: MyApp());
-// //   }
-// // }
-// //
-// // class MyApp extends StatefulWidget {
-// //   @override
-// //   _MyAppState createState() => _MyAppState();
-// // }
-// //
-// // class _MyAppState extends State<MyApp> {
-// //   String? qr;
-// //   bool camState = false;
-// //
-// //   @override
-// //   initState() {
-// //     super.initState();
-// //   }
-// //
-// //   @override
-// //   Widget build(BuildContext context) {
-// //     return Scaffold(
-// //       appBar: AppBar(
-// //         title: Text('Plugin example app'),
-// //       ),
-// //       body: Center(
-// //         child: Column(
-// //           crossAxisAlignment: CrossAxisAlignment.center,
-// //           mainAxisAlignment: MainAxisAlignment.center,
-// //           children: <Widget>[
-// //             Expanded(
-// //                 child: camState
-// //                     ? Center(
-// //                   child: SizedBox(
-// //                     width: 300.0,
-// //                     height: 600.0,
-// //                     child: MobileScanner(
-// //                       onError: (context, error) => Text(
-// //                         error.toString(),
-// //                         style: TextStyle(color: Colors.red),
-// //                       ),
-// //                       qrCodeCallback: (code) {
-// //                         setState(() {
-// //                           qr = code;
-// //                         });
-// //                       },
-// //                       child: Container(
-// //                         decoration: BoxDecoration(
-// //                           color: Colors.transparent,
-// //                           border: Border.all(
-// //                               color: Colors.orange,
-// //                               width: 10.0,
-// //                               style: BorderStyle.solid),
-// //                         ),
-// //                       ),
-// //                     ),
-// //                   ),
-// //                 )
-// //                     : Center(child: Text("Camera inactive"))),
-// //             Text("QRCODE: $qr"),
-// //           ],
-// //         ),
-// //       ),
-// //       floatingActionButton: FloatingActionButton(
-// //           child: Text(
-// //             "press me",
-// //             textAlign: TextAlign.center,
-// //           ),
-// //           onPressed: () {
-// //             setState(() {
-// //               camState = !camState;
-// //             });
-// //           }),
-// //     );
-// //   }
-// // }
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
+import 'package:mobile_scanner_example/barcode_scanner_window.dart';
+import 'package:mobile_scanner_example/scanner_error_widget.dart';
+
+void main() {
+  debugPaintSizeEnabled = false;
+  runApp(HomePage());
+}
+
+class HomePage extends StatefulWidget {
+  @override
+  HomeState createState() => HomeState();
+}
+
+class HomeState extends State<HomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(home: BarcodeScannerWithOverlay());
+  }
+}
+
+class BarcodeScannerWithOverlay extends StatefulWidget {
+  @override
+  _MyAppState createState() => _MyAppState();
+}
+
+class _MyAppState extends State<BarcodeScannerWithOverlay> {
+  String? qr;
+  String overlayText = "Please scan QR Code";
+  bool camState = false;
+  late BarcodeCapture currentBarcodeCapture ;
+  final MobileScannerController controller = MobileScannerController(
+    facing: CameraFacing.back,
+    autoStart: false
+  );
+  @override
+  initState() {
+    super.initState();
+  }
+
+  @override
+  dispose() {
+    super.dispose();
+    controller.dispose();
+  }
+
+  configureCameraSettings() {
+    setState(() {
+      camState = !camState;
+      controller.start();
+    });
+  }
+
+  onBarcodeDetect(BarcodeCapture barcodeCapture) {
+  setState(() {
+    currentBarcodeCapture = barcodeCapture;
+    overlayText = barcodeCapture.barcodes.last.displayValue!;
+  });
+  }
+
+
+
+  @override
+  Widget build(BuildContext context) {
+    final scanWindow = Rect.fromCenter(
+      center: MediaQuery.of(context).size.center(Offset.zero),
+      width: 200,
+      height: 200,
+    );
+    final height = MediaQuery.of(context).size.height;
+    final width = MediaQuery.of(context).size.width;
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Scanner with Overlay Example app'),
+      ),
+      body: Center(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Expanded(
+                child: camState
+                    ? Stack(
+                      fit: StackFit.expand,
+                      children: [
+                        Center(
+                        child: MobileScanner(
+                          fit: BoxFit.contain,
+                          onDetect: (BarcodeCapture barcodeCapture) => {
+                            onBarcodeDetect(barcodeCapture)
+
+                        },
+                        overlay: 
+                      Positioned(
+                         bottom: height * 0.2,
+                        child:Opacity(opacity: 0.7, child:
+                        Text(overlayText, style: const TextStyle(backgroundColor: Colors.black26, color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24, overflow: TextOverflow.ellipsis,),
+                        maxLines: 1,
+                        )
+                        ) ,
+                        ),
+                        
+                        controller: controller,
+                        scanWindow: scanWindow,
+                         errorBuilder: (context, error, child) {
+                    return ScannerErrorWidget(error: error);
+                },
+                        ),
+                
+                ),
+                        CustomPaint(
+                          painter:  ScannerOverlay(scanWindow),
+                        ),
+                        Positioned(
+                          bottom: 0.07 * height,
+                          left: 0.35 * width,
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                            children: [
+                              IconButton(onPressed: ()=>{
+                                controller.toggleTorch()
+                              }, icon: const Icon(Icons.flashlight_on, color: Colors.white,),),
+                              IconButton(onPressed: ()=>{
+                                controller.switchCamera()
+                              }, icon: const Icon(Icons.cameraswitch_rounded, color: Colors.white,)),
+                            ],
+                          ),
+                        )
+                      ],
+                    )
+                    : const Center(child: Text("Tap on Camera to activate QR Scanner"))),
+
+          ],
+        ),
+      ),
+      floatingActionButton: camState ? null : FloatingActionButton(
+          child: Icon(
+            Icons.camera_alt
+          ),
+          onPressed: () {
+            configureCameraSettings();
+          }),
+    );
+  }
+}
+
+class ScannerOverlay extends CustomPainter {
+  ScannerOverlay(this.scanWindow);
+
+  final Rect scanWindow;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final backgroundPath = Path()..addRect(Rect.largest);
+    final cutoutPath = Path()..addRect(scanWindow);
+
+    final backgroundPaint = Paint()
+      ..color = Colors.black.withOpacity(0.5)
+      ..style = PaintingStyle.fill
+      ..blendMode = BlendMode.dstOut;
+
+    final backgroundWithCutout = Path.combine(
+      PathOperation.difference,
+      backgroundPath,
+      cutoutPath,
+    );
+
+    // Create a Paint object for the white border
+    final borderPaint = Paint()
+      ..color = Colors.white
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 4.0; // Adjust the border width as needed
+
+    // Calculate the border rectangle with rounded corners
+    final borderRadius = BorderRadius.circular(12.0); // Adjust the radius as needed
+    final borderRect = RRect.fromRectAndCorners(
+      scanWindow,
+      topLeft: Radius.circular(12.0),
+      topRight: Radius.circular(12.0),
+      bottomLeft: Radius.circular(12.0),
+      bottomRight: Radius.circular(12.0),
+    );
+
+    // Draw the white border
+    canvas.drawPath(backgroundWithCutout, backgroundPaint);
+    canvas.drawRRect(borderRect, borderPaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return false;
+  }
+}

@@ -202,7 +202,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					33CC10EC2044A3C60003C045 = {

 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"