Flutter如何使用Google的二维码扫描插件

在Flutter项目中集成Google的二维码扫描插件时遇到问题。按照官方文档添加了mobile_scanner依赖并配置了相机权限，但运行时始终无法启动摄像头预览。具体表现为：

  1. Android真机调试时弹出权限请求后，界面卡在黑屏状态
  2. iOS模拟器报错CameraAccessDenied，但已确保在Info.plist中添加了隐私描述
    请问：
  • 是否需要额外配置原生平台的相机参数？
  • 是否有已知的兼容性问题（设备/系统版本）？
  • 能否提供完整的初始化代码示例？目前使用的是最基本的MobileScanner widget封装。
2 回复

在Flutter中使用Google的二维码扫描插件，首先在pubspec.yaml中添加依赖：

dependencies:
  google_ml_kit: ^x.x.x

然后安装包，在代码中导入并使用BarcodeScanner扫描二维码。确保处理相机权限和结果解析。

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


在Flutter中使用Google的二维码扫描插件，推荐使用 camera 和 google_mlkit_barcode_scanning 组合实现。以下是详细步骤和代码示例：

步骤1：添加依赖

在 pubspec.yaml 中添加：

dependencies:
  camera: ^latest_version
  google_mlkit_barcode_scanning: ^latest_version

运行 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:camera/camera.dart';
import 'package:google_mlkit_barcode_scanning/google_mlkit_barcode_scanning.dart';

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

class _QRScannerPageState extends State<QRScannerPage> {
  CameraController? _controller;
  final _barcodeScanner = BarcodeScanner();
  bool _isScanning = false;

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

  Future<void> _initializeCamera() async {
    final cameras = await availableCameras();
    _controller = CameraController(cameras[0], ResolutionPreset.medium);
    await _controller!.initialize();
    _controller!.startImageStream(_processCameraImage);
    setState(() {});
  }

  void _processCameraImage(CameraImage image) async {
    if (_isScanning) return;
    _isScanning = true;

    final inputImage = _inputImageFromCameraImage(image);
    if (inputImage == null) {
      _isScanning = false;
      return;
    }

    final barcodes = await _barcodeScanner.processImage(inputImage);
    if (barcodes.isNotEmpty) {
      // 处理扫描结果
      print('扫描结果: ${barcodes.first.displayValue}');
    }
    _isScanning = false;
  }

  InputImage? _inputImageFromCameraImage(CameraImage image) {
    // 实现图像格式转换（需根据CameraImage格式处理）
    // 此处为简化示例，实际需处理YUV或RGB转换
  }

  @override
  Widget build(BuildContext context) {
    if (_controller?.value.isInitialized == false) {
      return CircularProgressIndicator();
    }
    return CameraPreview(_controller!);
  }

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

注意事项：

  1. 图像转换：_inputImageFromCameraImage 需要根据实际图像格式实现（参考 camera 插件文档）
  2. 性能优化：通过 _isScanning 控制扫描频率，避免重复处理
  3. 结果处理：在 barcodes.isNotEmpty 时处理扫描结果（导航、显示弹窗等）

替代方案：

  • 使用 mobile_scanner 插件（基于ML Kit的封装，更简单）：
    dependencies:
  mobile_scanner: ^latest_version

这种方法直接利用Google ML Kit，支持多种条码格式，且无需网络连接。

回到顶部