Flutter二维码扫描插件custom_qr_code_scanner的使用

项目状态

该项目目前仅处于维护模式。由于该插件依赖的基础框架 zxing（用于Android）和 MTBBarcodeScanner（用于iOS）已经不再被维护，因此该插件也不再是最新的。只有在修复错误和进行小的增强时才会考虑更新。

我在开发一个新的插件 mobile_scanner，它使用最新的MLKit来检测条形码和二维码。在Android上，它还使用了最新的CameraX，并在iOS上使用了原生AVFoundation以获得最佳的相机性能。

二维码扫描器

这是一个可以在iOS和Android上运行的二维码扫描器，通过在Flutter中嵌入平台视图实现。与跳转到原生Activity或ViewController相比，这种集成方式更加无缝，效果更好。

截图

Android

iOS

获取扫描的二维码

当识别出一个二维码时，扫描到的文本将存储在类型为 Barcode 的 result 中，其中包含输出文本的属性 code 和扫描代码类型的属性 format，该属性是一个枚举 BarcodeFormat，定义在库中。

class _QRViewExampleState extends State<QRViewExample> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  Barcode? result;
  QRViewController? controller;

  // 为了使热重载工作，如果平台是Android，则需要暂停相机，如果是iOS，则需要恢复相机。
  @override
  void reassemble() {
    super.reassemble();
    if (Platform.isAndroid) {
      controller!.pauseCamera();
    } else if (Platform.isIOS) {
      controller!.resumeCamera();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
            ),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: (result != null)
                  ? Text(
                      'Barcode Type: ${describeEnum(result!.format)}   Data: ${result!.code}')
                  : Text('Scan a code'),
            ),
          )
        ],
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData;
      });
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

Android集成

要使用此插件，请更新Gradle、Kotlin和Kotlin Gradle插件：

在 android/build.gradle 文件中，将 ext.kotlin_version = '1.3.50' 更改为 ext.kotlin_version = '1.5.10'。

在 android/build.gradle 文件中，将 classpath 'com.android.tools.build:gradle:3.5.0' 更改为 classpath 'com.android.tools.build:gradle:4.2.0'。

在 android/gradle/wrapper/gradle-wrapper.properties 文件中，将 distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip 更改为 distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip。

在 android/app/build.gradle 文件中，将 defaultConfig{ minSdkVersion 16} 更改为 defaultConfig{ minSdkVersion 20}。

警告

如果您正在使用Flutter Beta或Dev通道（1.25或1.26），可能会遇到以下错误：

java.lang.AbstractMethodError: abstract method "void io.flutter.plugin.platform.PlatformView.onFlutterViewAttached(android.view.View)"

这是一个Flutter中的错误，可以在此处跟踪：Flutter Issue #72185。可以通过在 gradle.properties 文件中添加 android.enableDexingArtifactTransform=false 来解决此问题。

iOS集成

要在iOS上使用此插件，请在您的 Info.plist 文件中添加以下内容：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes</string>

Web集成

在 web/index.html 文件中添加以下内容：

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js"></script>

请注意：在Web平台上，只支持扫描QR码。其他条形码和二维码不被支持。

Web支持还在非常早期的阶段。诸如闪光灯、暂停或恢复等功能尚未实现。此外，相机预览可能不会遵守周围的约束。这主要是由于Flutter平台视图在Web上的早期状态。

翻转摄像头（后/前）

默认情况下，使用的是后置摄像头。

await controller.flipCamera();

开关闪光灯（开/关）

默认情况下，闪光灯是关闭的。

await controller.toggleFlash();

暂停/恢复

暂停相机流和扫描器。

await controller.pauseCamera();

恢复相机流和扫描器。

await controller.resumeCamera();