655: replace qr_code_scanner with mobile_scanner (#679)

* 655: replace qr_code_scanner * 655: add overlay shape * Update pod file * Fix layout of mobile scanner (this commit breaks the layout actually, but the app does not crash) * 655: adjust qr code design Co-authored-by: Max Ammann <[email protected]> Co-authored-by: Michael Markl <[email protected]>
digitalfabrik · Jan 11, 2023 · 245a05d · 245a05d
1 parent 80589a3
commit 245a05d
Show file tree

Hide file tree

Showing 9 changed files with 369 additions and 160 deletions.
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -48,7 +48,8 @@
             "args": [
                 "flutter",
                 "run",
-                "--dart-define=environment=local"
+                "--dart-define=environment=local",
+                "--flavor=Bayern"
             ],
             "problemMatcher": [
                 "$gradle"

diff --git a/frontend/android/app/build.gradle b/frontend/android/app/build.gradle
@@ -119,7 +119,7 @@ android {
     }
 
     defaultConfig {
-        minSdkVersion 20
+        minSdkVersion 21
         targetSdkVersion 33
         multiDexEnabled true
         versionCode flutterVersionCode.toInteger()

diff --git a/frontend/ios/Podfile.lock b/frontend/ios/Podfile.lock
@@ -7,21 +7,77 @@ PODS:
     - Flutter
   - geolocator_apple (1.2.0):
     - Flutter
+  - GoogleDataTransport (9.2.0):
+    - GoogleUtilities/Environment (~> 7.7)
+    - nanopb (< 2.30910.0, >= 2.30908.0)
+    - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleMLKit/BarcodeScanning (3.2.0):
+    - GoogleMLKit/MLKitCore
+    - MLKitBarcodeScanning (~> 2.2.0)
+  - GoogleMLKit/MLKitCore (3.2.0):
+    - MLKitCommon (~> 8.0.0)
+  - GoogleToolboxForMac/DebugUtils (2.3.2):
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+  - GoogleToolboxForMac/Defines (2.3.2)
+  - GoogleToolboxForMac/Logger (2.3.2):
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+  - "GoogleToolboxForMac/NSData+zlib (2.3.2)":
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+  - "GoogleToolboxForMac/NSDictionary+URLArguments (2.3.2)":
+    - GoogleToolboxForMac/DebugUtils (= 2.3.2)
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+    - "GoogleToolboxForMac/NSString+URLArguments (= 2.3.2)"
+  - "GoogleToolboxForMac/NSString+URLArguments (2.3.2)"
+  - GoogleUtilities/Environment (7.7.0):
+    - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleUtilities/Logger (7.7.0):
+    - GoogleUtilities/Environment
+  - GoogleUtilities/UserDefaults (7.7.0):
+    - GoogleUtilities/Logger
+  - GoogleUtilitiesComponents (1.1.0):
+    - GoogleUtilities/Logger
+  - GTMSessionFetcher/Core (1.7.2)
   - MapLibre (5.12.2)
   - maplibre_gl (0.0.1):
     - Flutter
     - MapLibre (~> 5.12.2)
     - MapLibreAnnotationExtension (~> 0.0.1-beta.2)
   - MapLibreAnnotationExtension (0.0.1-beta.2):
     - MapLibre (~> 5.12.0)
-  - MTBBarcodeScanner (5.0.11)
+  - MLImage (1.0.0-beta3)
+  - MLKitBarcodeScanning (2.2.0):
+    - MLKitCommon (~> 8.0)
+    - MLKitVision (~> 4.2)
+  - MLKitCommon (8.0.0):
+    - GoogleDataTransport (~> 9.0)
+    - GoogleToolboxForMac/Logger (~> 2.1)
+    - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
+    - "GoogleToolboxForMac/NSDictionary+URLArguments (~> 2.1)"
+    - GoogleUtilities/UserDefaults (~> 7.0)
+    - GoogleUtilitiesComponents (~> 1.0)
+    - GTMSessionFetcher/Core (~> 1.1)
+    - Protobuf (~> 3.12)
+  - MLKitVision (4.2.0):
+    - GoogleToolboxForMac/Logger (~> 2.1)
+    - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
+    - GTMSessionFetcher/Core (~> 1.1)
+    - MLImage (= 1.0.0-beta3)
+    - MLKitCommon (~> 8.0)
+    - Protobuf (~> 3.12)
+  - mobile_scanner (0.0.1):
+    - Flutter
+    - GoogleMLKit/BarcodeScanning (~> 3.2.0)
+  - nanopb (2.30909.0):
+    - nanopb/decode (= 2.30909.0)
+    - nanopb/encode (= 2.30909.0)
+  - nanopb/decode (2.30909.0)
+  - nanopb/encode (2.30909.0)
   - package_info_plus (0.4.5):
     - Flutter
   - path_provider_ios (0.0.1):
     - Flutter
-  - qr_code_scanner (0.2.0):
-    - Flutter
-    - MTBBarcodeScanner
+  - PromisesObjC (2.1.1)
+  - Protobuf (3.21.12)
   - ReachabilitySwift (5.0.0)
   - shared_preferences_ios (0.0.1):
     - Flutter
@@ -36,9 +92,9 @@ DEPENDENCIES:
   - MapLibre
   - maplibre_gl (from `.symlinks/plugins/maplibre_gl/ios`)
   - MapLibreAnnotationExtension
+  - mobile_scanner (from `.symlinks/plugins/mobile_scanner/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
-  - qr_code_scanner (from `.symlinks/plugins/qr_code_scanner/ios`)
   - shared_preferences_ios (from `.symlinks/plugins/shared_preferences_ios/ios`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
 
@@ -47,7 +103,19 @@ SPEC REPOS:
     - MapLibre
     - MapLibreAnnotationExtension
   trunk:
-    - MTBBarcodeScanner
+    - GoogleDataTransport
+    - GoogleMLKit
+    - GoogleToolboxForMac
+    - GoogleUtilities
+    - GoogleUtilitiesComponents
+    - GTMSessionFetcher
+    - MLImage
+    - MLKitBarcodeScanning
+    - MLKitCommon
+    - MLKitVision
+    - nanopb
+    - PromisesObjC
+    - Protobuf
     - ReachabilitySwift
 
 EXTERNAL SOURCES:
@@ -61,12 +129,12 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/geolocator_apple/ios"
   maplibre_gl:
     :path: ".symlinks/plugins/maplibre_gl/ios"
+  mobile_scanner:
+    :path: ".symlinks/plugins/mobile_scanner/ios"
   package_info_plus:
     :path: ".symlinks/plugins/package_info_plus/ios"
   path_provider_ios:
     :path: ".symlinks/plugins/path_provider_ios/ios"
-  qr_code_scanner:
-    :path: ".symlinks/plugins/qr_code_scanner/ios"
   shared_preferences_ios:
     :path: ".symlinks/plugins/shared_preferences_ios/ios"
   url_launcher_ios:
@@ -77,13 +145,25 @@ SPEC CHECKSUMS:
   Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
   flutter_secure_storage: 7953c38a04c3fdbb00571bcd87d8e3b5ceb9daec
   geolocator_apple: cc556e6844d508c95df1e87e3ea6fa4e58c50401
+  GoogleDataTransport: 1c8145da7117bd68bbbed00cf304edb6a24de00f
+  GoogleMLKit: 0017a6a8372e1a182139b9def4d89be5d87ca5a7
+  GoogleToolboxForMac: 8bef7c7c5cf7291c687cf5354f39f9db6399ad34
+  GoogleUtilities: e0913149f6b0625b553d70dae12b49fc62914fd1
+  GoogleUtilitiesComponents: 679b2c881db3b615a2777504623df6122dd20afe
+  GTMSessionFetcher: 5595ec75acf5be50814f81e9189490412bad82ba
   MapLibre: 5aa820115d91293a4d09e681e7470f88bd34b672
   maplibre_gl: 2a0ce99f40b3a133b0e8b40b5ef37e0562165399
   MapLibreAnnotationExtension: bc7f1041206218d7d24ba0908e3145cd54b86664
-  MTBBarcodeScanner: f453b33c4b7dfe545d8c6484ed744d55671788cb
+  MLImage: 489dfec109f21da8621b28d476401aaf7a0d4ff4
+  MLKitBarcodeScanning: d92fe1911001ec36870162c5a0eb206f612b7169
+  MLKitCommon: f6da6c5659618c070b50a80db01248ebe2964175
+  MLKitVision: 96c96571190b7f63eddf4a12068ce8a8689e0d2c
+  mobile_scanner: 0cf06f3d5224576aa24ade02a6f73d8b2551c7bf
+  nanopb: b552cce312b6c8484180ef47159bc0f65a1f0431
   package_info_plus: 6c92f08e1f853dc01228d6f553146438dafcd14e
   path_provider_ios: 14f3d2fd28c4fdb42f44e0f751d12861c43cee02
-  qr_code_scanner: bb67d64904c3b9658ada8c402e8b4d406d5d796e
+  PromisesObjC: ab77feca74fa2823e7af4249b8326368e61014cb
+  Protobuf: 120350fc38646e2dedc26f49ecba778184ea1de2
   ReachabilitySwift: 985039c6f7b23a1da463388634119492ff86c825
   shared_preferences_ios: 548a61f8053b9b8a49ac19c1ffbc8b92c50d68ad
   url_launcher_ios: 839c58cdb4279282219f5e248c3321761ff3c4de

diff --git a/frontend/lib/identification/identification_qr_scanner_page.dart b/frontend/lib/identification/identification_qr_scanner_page.dart
@@ -12,19 +12,17 @@ class IdentificationQrScannerPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: Column(
-        children: [
-          const NavigationBar(
-            title: "Karte hinzufügen",
+    return Column(
+      children: [
+        const NavigationBar(
+          title: "Karte hinzufügen",
+        ),
+        Expanded(
+          child: QrCodeScannerPage(
+            onCodeScanned: (code) async => _onCodeScanned(context, code),
           ),
-          Expanded(
-            child: QrCodeScannerPage(
-              onCodeScanned: (code) async => _onCodeScanned(context, code),
-            ),
-          )
-        ],
-      ),
+        ),
+      ],
     );
   }
 

diff --git a/frontend/lib/qr_code_scanner/qr_code_scanner.dart b/frontend/lib/qr_code_scanner/qr_code_scanner.dart
@@ -1,8 +1,9 @@
 import 'dart:math';
 
 import 'package:ehrenamtskarte/qr_code_scanner/qr_code_scanner_controls.dart';
+import 'package:ehrenamtskarte/qr_code_scanner/qr_overlay_shape.dart';
 import 'package:flutter/material.dart';
-import 'package:qr_code_scanner/qr_code_scanner.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
 
 const scanDelayAfterErrorMs = 500;
 
@@ -18,7 +19,10 @@ class QrCodeScanner extends StatefulWidget {
 }
 
 class _QRViewState extends State<QrCodeScanner> {
-  QRViewController? _controller;
+  final MobileScannerController _controller = MobileScannerController(
+    torchEnabled: false,
+    formats: [BarcodeFormat.qrCode],
+  );
   final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
   bool isProcessingCode = false;
 
@@ -29,35 +33,47 @@ class _QRViewState extends State<QrCodeScanner> {
       children: <Widget>[
         Expanded(
           flex: 4,
-          child: QRView(
-            key: qrKey,
-            onQRViewCreated: _onQrViewCreated,
-            overlay: QrScannerOverlayShape(
-              borderColor: Theme.of(context).colorScheme.secondary,
-              borderRadius: 10,
-              borderLength: 30,
-              borderWidth: 10,
-              cutOutSize: _calculateScanArea(context),
-            ),
-          ),
-        ),
-        if (controller != null)
-          Expanded(
-            flex: 1,
-            child: FittedBox(
-              fit: BoxFit.contain,
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: <Widget>[
-                  Container(
-                    margin: const EdgeInsets.all(8),
-                    child: const Text('Halten Sie die Kamera auf den QR Code.'),
+          child: Stack(
+            fit: StackFit.expand,
+            children: [
+              MobileScanner(
+                key: qrKey,
+                onDetect: (barcode, args) => _onCodeScanned(barcode),
+                allowDuplicates: false,
+                controller: controller,
+              ),
+              Padding(
+                padding: EdgeInsets.zero,
+                child: DecoratedBox(
+                  decoration: ShapeDecoration(
+                    shape: QrScannerOverlayShape(
+                      borderRadius: 10,
+                      borderColor: Theme.of(context).colorScheme.secondary,
+                      borderLength: 30,
+                      borderWidth: 10,
+                      cutOutSize: _calculateScanArea(context),
+                    ),
                   ),
-                  QrCodeScannerControls(controller: controller)
-                ],
+                ),
               ),
+            ],
+          ),
+        ),
+        Expanded(
+          flex: 1,
+          child: FittedBox(
+            fit: BoxFit.contain,
+            child: Column(
+              children: [
+                Container(
+                  margin: const EdgeInsets.all(8),
+                  child: const Text('Halten Sie die Kamera auf den QR Code.'),
+                ),
+                QrCodeScannerControls(controller: controller)
+              ],
             ),
-          )
+          ),
+        )
       ],
     );
   }
@@ -76,42 +92,18 @@ class _QRViewState extends State<QrCodeScanner> {
     return scanArea;
   }
 
-  void _onQrViewCreated(QRViewController controller) {
-    setState(() {
-      _controller = controller;
-    });
-    controller.scannedDataStream.listen(_onCodeScanned);
-  }
-
   Future<void> _onCodeScanned(Barcode scanData) async {
-    final controller = _controller;
-    final code = scanData.code;
-    if (controller == null || code == null) {
-      return;
-    }
-
-    // needed because this method gets called multiple times in a row after one
-    // qr code gets detected, therefore we need to protect it
-    if (isProcessingCode) {
+    final code = scanData.rawValue;
+    if (code == null) {
       return;
     }
-    isProcessingCode = true;
-    controller.pauseCamera();
 
     await widget.onCodeScanned(code);
-
-    // give the user time to move the camara away from the qr code
-    await Future.delayed(const Duration(milliseconds: scanDelayAfterErrorMs));
-
-    if (mounted) {
-      controller.resumeCamera();
-    }
-    isProcessingCode = false;
   }
 
   @override
   void dispose() {
-    _controller?.dispose();
+    _controller.dispose();
     super.dispose();
   }
 }