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

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

项目状态

该项目目前处于维护模式。由于该插件依赖的基础框架（Android上的zxing和iOS上的MTBBarcodeScanner）不再得到维护，因此该插件也已过时。仅会考虑进行错误修复和小的增强。

QR码扫描器

pub package Join the chat GH Actions

这是一个可以在iOS和Android上通过原生嵌入平台视图在Flutter中工作的QR码扫描器。与跳转到原生Activity或ViewController执行扫描相比，这种集成方式与Flutter的融合更加无缝。

截图

Android

iOS

获取扫描的QR码

当识别到一个QR码时，识别出的文本将设置为类型为Barcode的result对象的属性，其中包含输出文本作为字符串类型的code属性，以及扫描码类型作为枚举类型的format属性。

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的一个bug，可以在此处跟踪：https://github.com/flutter/flutter/issues/72185

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

iOS集成

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

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSCameraUsageDescription</key>
<string>这个应用需要访问相机来扫描二维码</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();

更多关于Flutter二维码扫描插件joy_code_scanner的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter二维码扫描插件joy_code_scanner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


joy_code_scanner 是一个 Flutter 插件，用于在移动应用中实现二维码和条形码的扫描功能。它基于 camera 和 ml_kit 库，提供了简单易用的 API 来集成二维码扫描功能。

安装

首先，你需要在 pubspec.yaml 文件中添加 joy_code_scanner 依赖：

dependencies:
  flutter:
    sdk: flutter
  joy_code_scanner: ^latest_version

然后，运行 flutter pub get 来安装依赖。

使用指南

1. 导入包

在你的 Dart 文件中导入 joy_code_scanner 包：

import 'package:joy_code_scanner/joy_code_scanner.dart';

2. 创建扫描页面

你可以创建一个新的页面来展示摄像头视图并处理扫描结果。

class QRScannerPage extends StatefulWidget {
  @override
  _QRScannerPageState createState() => _QRScannerPageState();
}

class _QRScannerPageState extends State<QRScannerPage> {
  final JoyCodeScanner _qrScanner = JoyCodeScanner();

  String? _scanResult;

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

  @override
  void dispose() {
    _qrScanner.dispose();
    super.dispose();
  }

  Future<void> _startScanning() async {
    _qrScanner.scan().listen((scanResult) {
      setState(() {
        _scanResult = scanResult;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: Column(
        children: [
          Expanded(
            child: JoyCodeScannerPreview(_qrScanner),
          ),
          if (_scanResult != null)
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('Scan Result: $_scanResult'),
            ),
        ],
      ),
    );
  }
}

3. 启动扫描页面

在你的应用中，你可以通过导航到 QRScannerPage 来启动二维码扫描功能。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => QRScannerPage()),
);

配置

joy_code_scanner 提供了一些配置选项，你可以根据需要进行调整。例如，你可以设置扫描的格式、摄像头的分辨率等。

_qrScanner.configure(
  formats: [BarcodeFormat.qrCode], // 只扫描二维码
  resolution: ResolutionPreset.high, // 设置摄像头分辨率
);

处理扫描结果

JoyCodeScanner 会通过 scan() 方法返回一个 Stream，你可以监听这个 Stream 来获取扫描结果。

_qrScanner.scan().listen((scanResult) {
  // 处理扫描结果
  print('Scanned: $scanResult');
});

权限处理

在使用摄像头功能时，确保你已经处理了相关的权限请求。你可以在 pubspec.yaml 中添加 permission_handler 插件来处理权限。

dependencies:
  permission_handler: ^latest_version

然后在代码中请求摄像头权限：

import 'package:permission_handler/permission_handler.dart';

Future<void> _requestCameraPermission() async {
  var status = await Permission.camera.status;
  if (!status.isGranted) {
    await Permission.camera.request();
  }
}
回到顶部