Flutter二维码及条形码扫描插件qr_bar_code_scanner_dialog的使用

QR/Bar Code Scanner Dialog

这是一个用于显示简单的扫描对话框并轻松捕获条形码或二维码的插件。它支持Android、iOS和Web平台。对于Web，它使用html5-qrcode js库；对于Android和iOS，则使用qr_code_scanner。

特别注意

目前，这是唯一一个支持Flutter Web端进行条形码扫描的插件。

获取扫描的QR/Bar Code

当识别到二维码时，识别出的文本将通过函数回调onCode传递给开发者。

class _MyAppState extends State<MyApp> {

  final _qrBarCodeScannerDialogPlugin = QrBarCodeScannerDialog();
  String? code;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Builder(builder: (context) {
          return Material(
            child: Center(
              child: ElevatedButton(
                  onPressed: () {
                    _qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
                        context: context,
                        onCode: (code) {
                          setState(() {
                            this.code = code;
                          });
                        });
                  },
                  child: Text(code ?? "Click me")),
            ),
          );
        }),
      ),
    );
  }
}

Android集成

为了使用此插件，请更新Gradle、Kotlin和Kotlin Gradle Plugin：

• 在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中将minSdkVersion 16改为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中的一个bug，正在跟踪解决：https://github.com/flutter/flutter/issues/72185

你可以通过在gradle.properties文件中添加android.enableDexingArtifactTransform=false来绕过这个问题。

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集成

无需更新任何内容，插件会自动将HTML内容附加到DOM中。

完整示例代码

以下是完整的示例代码，展示了如何在Flutter项目中使用qr_bar_code_scanner_dialog插件：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final _qrBarCodeScannerDialogPlugin = QrBarCodeScannerDialog();
  String? code;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Builder(builder: (context) {
          return Material(
            child: Center(
              child: ElevatedButton(
                  onPressed: () {
                    _qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
                        context: context,
                        onCode: (code) {
                          setState(() {
                            this.code = code;
                          });
                        });
                  },
                  child: Text(code ?? "Click me")),
            ),
          );
        }),
      ),
    );
  }
}

这个示例创建了一个简单的Flutter应用，点击按钮后会弹出一个二维码或条形码扫描对话框，扫描成功后会在按钮上显示扫描结果。