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

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

QR/条形码扫描对话框

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

注意事项

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

获取扫描的二维码/条形码

当识别到二维码时，所识别的文本将通过回调函数onCode传递给处理程序。

class _MyAppState extends State<MyApp> {

  final _qrBarCodeScannerDialogPlugin = QrBarCodeScannerDialog();
  String? code;

  [@override](/user/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插件：

• 在android/build.gradle中将ext.kotlin_version = '1.3.50'更改为ext.kotlin_version = '1.5.10'
• 将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，可以在这里追踪。可以通过在gradle.properties文件中添加android.enableDexingArtifactTransform=false来解决这个问题。

iOS集成

为了使用此插件，请在Info.plist文件中添加以下内容：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSCameraUsageDescription</key>
<string>此应用需要相机访问权限以扫描二维码</string>

Web集成

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

示例代码

以下是使用qrcode_scanner_dialog插件的完整示例代码：

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _qrBarCodeScannerDialogPlugin = QrBarCodeScannerDialog();
  String? code;

  [@override](/user/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,
                        cameraFacing: CameraFacing.front,
                        onCode: (code) {
                          // 更新UI显示扫描结果
                          setState(() {
                            this.code = code;
                          });
                        });
                  },
                  child: Text(code ?? "点击我")),
            ),
          );
        }),
      ),
    );
  }
}