Flutter二维码与条形码扫描插件flutter_qr_bar_scanner的使用

Flutter二维码与条形码扫描插件flutter_qr_bar_scanner的使用

插件简介

flutter_qr_bar_scanner 是一个用于在Flutter应用中实现全屏扫描二维码和条形码的插件。它使用Google的Mobile Vision API来读取和扫描二维码/条形码，并通过Firebase的MLKit进行图像处理。该插件支持Android和iOS平台，能够直接从设备摄像头获取图像并显示预览。

Android 模型

在新版本的MLKit中，有两种不同的模型可以用于条形码扫描：

1. 内置模型：默认使用内置模型，这会增加约2.2MB的代码大小，但扫描效果更好，并且不需要在后台下载额外的包。
2. Google Play Services：可以通过Google Play Services动态下载模型。需要在AndroidManifest.xml中添加以下元数据：

   <application ...>
       ...
       <meta-data
           android:name="com.google.mlkit.vision.DEPENDENCIES"
           android:value="barcode" />
       <!-- 如果需要多个模型：android:value="barcode,model2,model3" -->
   </application>
   

iOS 64位支持

该插件仅支持iOS 64位设备。如果你需要支持iOS 11之前的版本，建议将iOS Deployment Target设置为11.0或更高版本。具体步骤如下：

1. 在Podfile中添加以下行：

   platform :ios, '11.0'
   

2. 确保Podfile底部设置了部署目标：

   post_install do |installer|
       installer.pods_project.targets.each do |target|
           target.build_configurations.each do |config|
               config.build_settings['ENABLE_BITCODE'] = 'NO'
               config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
           end
       end
   end
   

3. 在XCode中设置iOS Deployment Target为11.0。

使用示例

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_qr_bar_scanner/qr_bar_scanner_camera.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter QR/Bar Code Reader',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter QR/Bar Code Reader'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _qrInfo = 'Scan a QR/Bar code'; // 初始化提示信息
  bool _camState = false; // 控制相机状态

  // 扫描结果回调函数
  _qrCallback(String? code) {
    setState(() {
      _camState = false; // 停止相机预览
      _qrInfo = code; // 更新扫描结果
    });
  }

  // 启动扫描
  _scanCode() {
    setState(() {
      _camState = true; // 开启相机预览
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    _scanCode(); // 应用启动时自动开始扫描
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: _camState
          ? Center(
              child: SizedBox(
                height: 1000, // 设置相机预览的高度
                width: 500, // 设置相机预览的宽度
                child: QRBarScannerCamera(
                  onError: (context, error) => Text(
                    error.toString(), // 错误处理
                    style: TextStyle(color: Colors.red),
                  ),
                  qrCodeCallback: (code) {
                    _qrCallback(code); // 扫描结果回调
                  },
                ),
              ),
            )
          : Center(
              child: Text(_qrInfo!), // 显示扫描结果或提示信息
            ),
    );
  }
}