flutter如何实现二维码扫描功能

在Flutter中实现二维码扫描功能应该使用哪个插件？目前看到有多个选择，比如barcode_scan和qr_code_scanner，哪个更稳定好用？需要额外配置相机权限吗？能否提供具体的代码示例，包括扫描界面的布局和回调处理？

2 回复

使用Flutter实现二维码扫描功能，推荐使用qr_code_scanner插件。步骤如下：

  1. 添加依赖到pubspec.yaml。
  2. 在代码中导入包并配置相机权限。
  3. 使用QRView组件创建扫描界面。
  4. 通过onQRViewCreated回调获取扫描结果。

简单高效，适合快速集成。

更多关于flutter如何实现二维码扫描功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现二维码扫描功能，可以使用 camera 和 mobile_scanner 库。以下是详细步骤和代码示例：

步骤1：添加依赖

在 pubspec.yaml 中添加：

dependencies:
  mobile_scanner: ^3.6.0
  camera: ^0.10.5

运行 flutter pub get 安装依赖。

步骤2：配置权限

Android

在 android/app/src/main/AndroidManifest.xml 中添加：

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

iOS

在 ios/Runner/Info.plist 中添加：

<key>NSCameraUsageDescription</key>
<string>需要相机权限来扫描二维码</string>

步骤3：实现扫描界面

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

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

class _QRScannerPageState extends State<QRScannerPage> {
  MobileScannerController cameraController = MobileScannerController();
  String? scannedCode;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('二维码扫描')),
      body: Column(
        children: [
          Expanded(
            child: MobileScanner(
              controller: cameraController,
              onDetect: (capture) {
                final List<Barcode> barcodes = capture.barcodes;
                for (final barcode in barcodes) {
                  setState(() {
                    scannedCode = barcode.rawValue;
                  });
                  // 扫描到结果后停止相机
                  cameraController.stop();
                  break;
                }
              },
            ),
          ),
          if (scannedCode != null)
            Padding(
              padding: EdgeInsets.all(16),
              child: Text('扫描结果: $scannedCode'),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 重新开始扫描
          setState(() {
            scannedCode = null;
          });
          cameraController.start();
        },
        child: Icon(Icons.camera_alt),
      ),
    );
  }

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

步骤4：处理权限请求

在调用扫描页面前，确保已获取相机权限：

import 'package:permission_handler/permission_handler.dart';

Future<bool> _checkCameraPermission() async {
  var status = await Permission.camera.status;
  if (!status.isGranted) {
    status = await Permission.camera.request();
  }
  return status.isGranted;
}

主要功能说明：

  1. MobileScanner：核心扫描组件，自动处理相机预览和二维码识别
  2. onDetect：扫描到二维码时的回调函数
  3. 控制器管理：可以控制相机启动/停止
  4. 权限处理：确保应用有权访问相机

扩展功能：

  • 添加手电筒控制：cameraController.toggleTorch()
  • 自定义扫描框UI
  • 支持相册识别二维码（需使用 image_picker 库）

这个方案在Android和iOS上都能正常工作，会自动处理相机方向和分辨率适配。

回到顶部