Added web support for the app

Author: ApoorvaAditya

lib/screens/qr_scanner_screen/qr_scanner_screen.dart

@@ -1,8 +1,6 @@
-import 'dart:io';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:qr_code_scanner/qr_code_scanner.dart';
+import 'package:mobile_scanner/mobile_scanner.dart';
 import 'package:ticket_verification_app/services/api_service.dart';
 import 'package:ticket_verification_app/services/provider.dart';
 
@@ -14,99 +12,76 @@ class QrScannerScreen extends ConsumerStatefulWidget {
 }
 
 class _QrScannerScreenState extends ConsumerState<QrScannerScreen> {
-  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
-  Barcode? result;
-  QRViewController? controller;
-
-  // In order to get hot reload to work we need to pause the camera if the platform
-  // is android, or resume the camera if the platform is iOS.
-  @override
-  void reassemble() {
-    super.reassemble();
-    if (Platform.isAndroid) {
-      controller!.pauseCamera();
-    } else if (Platform.isIOS) {
-      controller!.resumeCamera();
-    }
-  }
-
+  final _mobileScannerController = MobileScannerController();
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: QRView(
-        key: qrKey,
-        onQRViewCreated: _onQRViewCreated,
-      ),
-    );
-  }
-
-  void _onQRViewCreated(QRViewController controller) {
-    this.controller = controller;
-    controller.scannedDataStream.listen((scanData) async {
-      controller.pauseCamera();
-      result = scanData;
-      print(result!.code);
-      if (result!.format != BarcodeFormat.qrcode) {
-        showDialog(
-          context: context,
-          builder: (ctx) => AlertDialog(
-            title: const Text('Failure'),
-            content: const Text('The thing scanned is not a qrcode'),
-            actions: [
-              TextButton(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                  controller.resumeCamera();
-                },
-                child: const Text('OK'),
+      appBar: AppBar(title: const Text('Mobile Scanner')),
+      body: MobileScanner(
+        controller: _mobileScannerController,
+        onDetect: (capture) async {
+          final List<Barcode> barcodes = capture.barcodes;
+          if (barcodes.isEmpty) return;
+          final Barcode barcode = barcodes.first;
+          _mobileScannerController.stop();
+          if (barcode.format != BarcodeFormat.qrCode || barcode.rawValue == null) {
+            showDialog(
+              context: context,
+              builder: (ctx) => AlertDialog(
+                title: const Text('Failure'),
+                content: const Text('The thing scanned is not a qrcode'),
+                actions: [
+                  TextButton(
+                    onPressed: () {
+                      Navigator.of(context).pop();
+                      _mobileScannerController.start();
+                    },
+                    child: const Text('OK'),
+                  ),
+                ],
               ),
-            ],
-          ),
-        );
-        return;
-      }
-      final apiResult = await ref.read<ApiService>(apiServiceProvider).getQrScanResult(qrCodeContent: result!.code!);
-      apiResult.fold(
-        (failure) => showDialog(
-          context: context,
-          builder: (ctx) => AlertDialog(
-            title: const Text('Failure'),
-            content: Text('The api call failed with message: ${failure.message}'),
-            actions: [
-              TextButton(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                  controller.resumeCamera();
-                },
-                child: const Text('OK'),
+            );
+          } else {
+            final apiResult =
+                await ref.read<ApiService>(apiServiceProvider).getQrScanResult(qrCodeContent: barcode.rawValue!);
+            apiResult.fold(
+              (failure) => showDialog(
+                context: context,
+                builder: (ctx) => AlertDialog(
+                  title: const Text('Failure'),
+                  content: Text('The api call failed with message: ${failure.message}'),
+                  actions: [
+                    TextButton(
+                      onPressed: () {
+                        Navigator.of(context).pop();
+                        _mobileScannerController.start();
+                      },
+                      child: const Text('OK'),
+                    ),
+                  ],
+                ),
               ),
-            ],
-          ),
-        ),
-        (responseData) => showDialog(
-          context: context,
-          builder: (ctx) => AlertDialog(
-            title: const Text('Success'),
-            content: Text(
-                'User Name: ${responseData.name}\nACM member: ${responseData.memberStatus ? 'Yes' : 'No'}\n Event Name: ${responseData.eventName}'),
-            actions: [
-              TextButton(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                  controller.resumeCamera();
-                },
-                child: const Text('OK'),
+              (responseData) => showDialog(
+                context: context,
+                builder: (ctx) => AlertDialog(
+                  title: const Text('Success'),
+                  content: Text(
+                      'User Name: ${responseData.name}\nACM member: ${responseData.memberStatus ? 'Yes' : 'No'}\n Event Name: ${responseData.eventName}'),
+                  actions: [
+                    TextButton(
+                      onPressed: () {
+                        Navigator.of(context).pop();
+                        _mobileScannerController.start();
+                      },
+                      child: const Text('OK'),
+                    ),
+                  ],
+                ),
               ),
-            ],
-          ),
-        ),
-      );
-    });
-  }
-
-  @override
-  void dispose() {
-    controller?.dispose();
-    super.dispose();
+            );
+          }
+        },
+      ),
+    );
   }
 }

lib/services/api_service.dart

@@ -24,6 +24,7 @@ class ApiService {
       }
       return right(ResponseData.fromJson(response.data as Map<String, dynamic>));
     } catch (e) {
+      // rethrow;
       return left(Failure(message: 'Exception caught: $e'));
     }
   }

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,6 +5,8 @@
 import FlutterMacOS
 import Foundation
 
+import mobile_scanner
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  MobileScannerPlugin.register(with: registry.registrar(forPlugin: "MobileScannerPlugin"))
 }

pubspec.lock

@@ -400,6 +400,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  mobile_scanner:
+    dependency: "direct main"
+    description:
+      name: mobile_scanner
+      sha256: bcc0926b5e7f0c62c4e5a56bc66d93af619373f19e1117e553d49af3c9293b3a
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.1"
   package_config:
     dependency: transitive
     description:
@@ -448,14 +456,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.1"
-  qr_code_scanner:
-    dependency: "direct main"
-    description:
-      name: qr_code_scanner
-      sha256: f23b68d893505a424f0bd2e324ebea71ed88465d572d26bb8d2e78a4749591fd
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.1"
   riverpod:
     dependency: transitive
     description:

pubspec.yaml

@@ -35,13 +35,13 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
-  qr_code_scanner: ^1.0.1
   dio: ^5.0.1
   auto_route: ^5.0.4
   flutter_riverpod: ^2.2.0
   dartz: ^0.10.1
   freezed_annotation: ^2.2.0
   json_annotation: ^4.8.0
+  mobile_scanner: ^3.1.1
 
 dev_dependencies:
   flutter_test: