我想构建一个基于 Flutter Web 的 PWA，它依赖于扫描二维码并访问用户的当前位置。
根据我对这两个功能的了解，目前没有可用的软件包。
但是，为了获取用户的位置，有一个 stackoverflow 线程 (Get User's Location for flutter Web) 提供了解决方案。
所以我想知道 QR 扫描问题是否有类似的解决方案？
遗憾的是，我对 web 和 javascript 开发不是很熟悉。因此，我们将不胜感激。
【问题讨论】：
标签： javascript dart progressive-web-apps qr-code flutter-web
按照这两篇文章，我设法在我的 Flutter Web 应用程序中使用了 jsQR 库。
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
通过这个，我现在可以在 Flutter Web 中扫描二维码。
【讨论】：
我使用了库ai_barcode。
插件的文档很糟糕，所以我在这里发布我的小部件：
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,
);
}
}
同时添加插件库中的jsQR.js。
ai_barcode: ^3.0.1
并将这一行添加到 index.html：
<script src="jsQR.js" type="application/javascript"></script> <!-- Add this line -->
<script src="main.dart.js" type="application/javascript"></script>
【讨论】：