Flutter barcode scanner on mobile web app

user_16557279 0
Viewed 1071

I have a barcode scanner working fine on Android, but I am struggling to find plugins that support a web app.

This is the closest one I've found that seems to be getting somewhere:

https://pub.dev/packages/ai_barcode

But I can't really get anything to happen.

Here is the code I'm using currently:

import 'package:flutter/material.dart';

import 'package:ai_barcode/ai_barcode.dart';


class WebBarcodeScannerPage extends StatefulWidget {

  // void resultCallback (String result) {
  //   debugtext
  // }

  @override
  _WebBarcodeScannerPageState createState() => _WebBarcodeScannerPageState();
}

class _WebBarcodeScannerPageState extends State<WebBarcodeScannerPage> {

  ScannerController _scannerController;
  String _debugText = 'debug';

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

    _scannerController = ScannerController(scannerResult: (r) => resultCallback(r));

    // _scannerController = ScannerController(scannerResult: (result) {
    //   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();
    //   }
    // });
  }

  resultCallback (String r) {
    print(r);
    setState(() {
      _debugText = r;
    });
  }

  _body () {
    return Column(
      children: [
        Text(_debugText),
        TextButton(
          child: Text('Start camera'),
          onPressed: () {
            _scannerController.startCamera();
          },
        ),
        TextButton(
          child: Text('Start preview'),
          onPressed: () {
            _scannerController.startCameraPreview();
          },
        ),
        TextButton(
          child: Text('Stop camera'),
          onPressed: () {
            _scannerController.stopCamera();
          },
        ),
        TextButton(
          child: Text('Stop preview'),
          onPressed: () {
            _scannerController.stopCameraPreview();
          },
        ),
        PlatformAiBarcodeScannerWidget(platformScannerController: _scannerController),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: _body(),
    );
  }

}

The camera preview shows up in a window, but I can't scan any barcodes or QR codes. The debug text never changes.

Again, my goal is to be able to read barcodes into a string on a mobile web app.

flutter-web flutter barcode-scanner barcode
4 Answers
user_63401280

You should add jsQR.js to web folder. You can find that HERE

user_116758170

you can use the source example from ai_barcode.

QRCodeDartScanView(
  typeCamera: TypeCamer.front,
  scanInvertedQRCode: true,
  resolutionPreset: QRCodeDartScanResolutionPreset.ultraHigh,
  formats: const [
    BarcodeFormat.QR_CODE,
  ],
  onCapture: (Result result) {
    printInfo(info: result.text);
  },
);

Just put this piece of code inside a build method. The camera opens and read qr codes.

user_4966370

I have faced the same issue while working on the flutter web.

Here is the new plugin that I have created especially for the web. It will support both barcode and QR-code.

pub.dev: https://pub.dev/packages/qr_bar_code_scanner_dialog

or install via terminal:

 $ flutter pub add qr_bar_code_scanner_dialog

Example:

final _qrBarCodeScannerDialogPlugin = QrBarCodeScannerDialog();

ElevatedButton(
    onPressed: () {
       _qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
          context: context,
          onCode: (code) {
             setState(() {
                this.code = code;
             });
       });
     },
     child: Text(code ?? "Click me")),
)
user_79537680
Related