fix: turn off scanning process after barcode is scanned or cancelled

Author: CodingWithTashi

lib/assets/barcode.html

@@ -21,30 +21,49 @@
 <!-- Div to show the scanner -->
 <div id="reader" ></div>
 <script>
-         const html5QrCode = new Html5Qrcode("reader");
-         console.log("Starting SCANNGING CODE");
-         const qrCodeSuccessCallback = (decodedText, decodedResult) => {
-             /* html5QrCode.stop(); */
-             /* handle success for web */
-             window.parent.postMessage(decodedText, "*");
+  //refer doc here https://github.com/mebjas/html5-qrcode
+ const html5QrCode = new Html5Qrcode("reader");
+ console.log("Starting SCANNING CODE");
+ const qrCodeSuccessCallback = (decodedText, decodedResult) => {
+     html5QrCode.stop();
+     /* handle success for web */
+     window.parent.postMessage(decodedText, "*");
 
-             /* handle success for window */
-             if(window.chrome.webview!="undefined"){
-             var param = {
-             "methodName":"successCallback",
-             "data":decodedText
-             }
-                window.chrome.webview.postMessage(param);
-             }
+     /* handle success for window */
+     if (window.chrome.webview != "undefined") {
+         var param = {
+             "methodName": "successCallback",
+             "data": decodedText
+         }
+         window.chrome.webview.postMessage(param);
+     }
 
-         };
-         const config = { fps: 10, qrbox:  { width: 280, height: 120, aspectRatio: 1.7777778 } };
+ };
+ const config = {
+     fps: 10,
+     qrbox: {
+         width: 280,
+         height: 120,
+         aspectRatio: 1.7777778
+     }
+ };
 
-         // If you want to prefer back camera
-         html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
-         //html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
+ // If you want to prefer back camera
+ html5QrCode.start({
+     facingMode: "environment"
+ }, config, qrCodeSuccessCallback);
+ //html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
 
+ //Window event listener
+ if (window.chrome.webview != undefined) {
+     window.chrome.webview.addEventListener('message', function(e) {
+         let data = JSON.parse(JSON.stringify(e.data));
+         if (data.event === "close") {
+             html5QrCode.stop();
+         }
 
-      </script>
+     });
+ }
+ </script>
 </body>
 </html>

lib/screens/window.dart

@@ -1,9 +1,11 @@
+import 'dart:convert';
 import 'dart:io';
+
 import 'package:flutter/material.dart';
+import 'package:path/path.dart' as p;
 import 'package:simple_barcode_scanner/constant.dart';
 import 'package:simple_barcode_scanner/enum.dart';
 import 'package:webview_windows/webview_windows.dart';
-import 'package:path/path.dart' as p;
 
 class WindowBarcodeScanner extends StatelessWidget {
   final String lineColor;
@@ -28,6 +30,14 @@ class WindowBarcodeScanner extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         title: Text(kScanPageTitle),
+        leading: IconButton(
+          onPressed: () {
+            /// send close event to web-view
+            controller.postWebMessage(json.encode({"event": "close"}));
+            Navigator.pop(context);
+          },
+          icon: const Icon(Icons.arrow_back_ios),
+        ),
       ),
       body: FutureBuilder<bool>(
           future: initPlatformState(
@@ -39,11 +49,12 @@ class WindowBarcodeScanner extends StatelessWidget {
                 controller,
                 permissionRequested: (url, permissionKind, isUserInitiated) =>
                     _onPermissionRequested(
-                        url: url,
-                        kind: permissionKind,
-                        isUserInitiated: isUserInitiated,
-                        context: context,
-                        isPermissionGranted: isPermissionGranted),
+                  url: url,
+                  kind: permissionKind,
+                  isUserInitiated: isUserInitiated,
+                  context: context,
+                  isPermissionGranted: isPermissionGranted,
+                ),
               );
             } else if (snapshot.hasError) {
               return Center(