Flutter二维码读取插件fast_qr_reader

Flutter二维码读取插件fast_qr_reader_view的使用

Fast QR Reader View Plugin

说明: 可以在 pub 上查看此插件: pub.dev

该插件允许访问设备的摄像头以扫描多种类型的编码（如 QR 码、PDF417、CODE39 等）。它基于 camera 插件。

示例动图 1 示例动图 2

红色框为 Flutter 动画（可移除）。由于是 GIF 格式，帧率较低。

特性

在小部件中显示实时摄像头预览。
iOS 使用原生 AVFoundation 进行码检测。
Android 使用 ML Kit 进行码检测。

安装

首先，在 pubspec.yaml 文件中添加 fast_qr_reader_view 作为依赖项。

dependencies:
  fast_qr_reader_view: ^0.2.1

运行以下命令以更新依赖项：

flutter pub get

iOS 配置

在 ios/Runner/Info.plist 文件中添加以下键值对：

<key>NSCameraUsageDescription</key>
<string>可以使用相机吗？</string>

Android 配置

按照以下步骤将 Firebase 添加到您的项目中：
- 打开 Firebase 控制台并创建一个新项目。
- 下载 google-services.json 文件并将其放置在 android/app/ 目录下。
- 在 android/build.gradle 文件中添加以下内容：
```
classpath 'com.google.gms:google-services:4.3.10'
```
- 在 android/app/build.gradle 文件中添加以下内容：
```
apply plugin: 'com.google.gms.google-services'

minSdkVersion 21
```
确保最低支持的 Android SDK 版本为 21 或更高版本。

示例代码

以下是一个完整的示例代码，展示如何使用 fast_qr_reader_view 插件来实现二维码扫描功能。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:fast_qr_reader_view/fast_qr_reader_view.dart';

// 获取可用摄像头列表
List<CameraDescription> cameras;

void main() async {
  // 初始化摄像头
  cameras = await availableCameras();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  QRReaderController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化控制器
    controller = QRReaderController(cameras[0], ResolutionPreset.medium, [CodeFormat.qr], onCodeRead);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
      controller.startScanning();
    });
  }

  // 处理扫码结果
  void onCodeRead(dynamic value) {
    print("扫描结果: $value");
    // 停止扫描 3 秒钟后重新开始
    new Future.delayed(const Duration(seconds: 3), controller.startScanning);
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    controller?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return new Container();
    }
    return new AspectRatio(
      aspectRatio: controller.value.aspectRatio,
      child: new QRReaderPreview(controller),
    );
  }
}

phonegap100 1楼•8 天前作者

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

fast_qr_reader_view 是一个用于在 Flutter 应用中快速读取二维码的插件。它基于 camera 插件，提供了高效的二维码扫描功能。以下是如何在 Flutter 项目中使用 fast_qr_reader_view 插件的步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 fast_qr_reader_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fast_qr_reader_view: ^0.0.1

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

2. 配置相机权限

在 Android 和 iOS 上使用相机功能需要相应的权限配置。

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.CAMERA" />

iOS

在 ios/Runner/Info.plist 文件中添加以下权限：

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan QR codes.</string>

3. 使用 `fast_qr_reader_view`

在你的 Flutter 页面中，你可以使用 FastQrReaderView 来显示相机预览并读取二维码。

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

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

class _QRScannerPageState extends State<QRScannerPage> {
  late FastQrReaderController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FastQrReaderController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FastQrReaderView(
              controller: _controller,
              onScan: (String code) {
                // 处理扫描到的二维码
                print('Scanned QR Code: $code');
                // 你可以在这里导航到其他页面或显示对话框
              },
            ),
          ),
        ],
      ),
    );
  }
}

4. 处理扫描结果

在 onScan 回调中，你可以处理扫描到的二维码数据。例如，你可以将扫描到的结果显示在屏幕上，或者根据扫描到的内容进行导航。

onScan: (String code) {
  // 处理扫描到的二维码
  print('Scanned QR Code: $code');
  // 你可以在这里导航到其他页面或显示对话框
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Scanned QR Code'),
        content: Text(code),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text('OK'),
          ),
        ],
      );
    },
  );
},

5. 运行应用

现在你可以运行你的 Flutter 应用，并测试二维码扫描功能。

flutter run

6. 其他功能

fast_qr_reader_view 还提供了其他一些功能，例如控制闪光灯、切换相机等。你可以通过 FastQrReaderController 来访问这些功能。

_controller.toggleFlash(); // 切换闪光灯
_controller.switchCamera(); // 切换前后摄像头

Flutter二维码读取插件fast_qr_reader_view的使用