CODEWITHSUNDEEP
javascriptdartprogressive-web-appsqr-codeflutter-web
SetNameHere
SetNameHere

Reputation: 121

Possibilities to scan qr-code in flutter web

I want to build a PWA based on flutter web which relies on scanning a QR-Code and accessing the user's current position.

From my point of knowledge for both functionalities there are currently no packages available.

However for getting the user's location there is a stackoverflow thread (Get User's Location for flutter Web) providing a solution.

So I'm wondering if there is any chance that there is a similar solution for the QR-Scanning issue?

Sadly, I'm not very familiar with web and javascript development. So any help would be highly appreciated.

Upvotes: 2

Views: 7502

Answers (2)

Timo Bähr
Timo Bähr

Reputation: 2026

I used the library ai_barcode.

Documentation of the plugin is teribble so I post here my widget:

import 'package:ai_barcode/ai_barcode.dart';
import 'package:flutter/material.dart';

class _BarcodeScannerWidget extends StatefulWidget {
  const _BarcodeScannerWidget(this.resultCallback);

  final void Function(String result) resultCallback;

  @override
  State<StatefulWidget> createState() {
    return _AppBarcodeScannerWidgetState();
  }
}

class _AppBarcodeScannerWidgetState extends State<_BarcodeScannerWidget> {
  late ScannerController _scannerController;

  @override
  void initState() {
    super.initState();

    _scannerController = ScannerController(scannerResult: (result) {
      widget.resultCallback(result);
    }, scannerViewCreated: () {
      final TargetPlatform platform = Theme.of(context).platform;
      if (TargetPlatform.iOS == platform) {
        Future.delayed(const Duration(seconds: 2), () {
          _scannerController
            ..startCamera()
            ..startCameraPreview();
        });
      } else {
        _scannerController
          ..startCamera()
          ..startCameraPreview();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();

    _scannerController
      ..stopCameraPreview()
      ..stopCamera();
  }

  @override
  Widget build(BuildContext context) {
    return PlatformAiBarcodeScannerWidget(
      platformScannerController: _scannerController,
    );
  }
}

Also add the jsQR.js from plugin repository.

ai_barcode: ^3.0.1

And add this line to index.html:

<script src="jsQR.js" type="application/javascript"></script> <!-- Add this line -->
<script src="main.dart.js" type="application/javascript"></script>

Upvotes: 4

SetNameHere
SetNameHere

Reputation: 121

Following these two articels, I managed to use the jsQR Library in my flutter web application.

https://medium.com/@mk.pyts/how-to-access-webcam-video-stream-in-flutter-for-web-1bdc74f2e9c7

https://medium.com/flutter-community/using-javascript-code-in-flutter-web-903de54a2000

https://github.com/cozmo/jsQR

By this, I'm now able to scan a QR-code in flutter web.

Upvotes: 6

Related Questions