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

插件简介

QR Mobile Vision 是一个用于读取二维码和其他条形码的Flutter插件，它依赖于Firebase的MLKit。此插件利用Android和iOS的原生API从设备摄像头获取图像，并将这些图像传递给MLKit Vision Barcode API以检测条形码/二维码等，同时输出预览图像显示在Flutter纹理上。该插件包含一个执行所有必要转换的Widget，以确保相机输出正确显示在定义区域内。

Android模型选择

• 使用内置模型：增加约2.2MB代码量，但扫描效果更好且无需后台下载额外包。
• 使用Google Play Services动态下载模型：需要确保应用安装时自动下载模型。

iOS要求

对于较新的Google条形码扫描库版本（如’GoogleMLKit/BarcodeScanning’），需要iOS 15.5+版本。如果遇到依赖错误，请确保项目使用的是15.5或更高版本。

使用方法

基本用法

首先确定你想要展示相机预览的区域大小，因为这一步非常重要——预览必须有一个受限尺寸才能正常构建。推荐的方式是将其放在SizedBox或Container中。

接下来，你需要引入这个包并实例化相机组件：

import 'package:qr_mobile_vision/qr_camera.dart';

...

new SizedBox(
  width: 300.0,
  height: 600.0,
  child: new QrCamera(
    qrCodeCallback: (code) {
      // 处理扫描到的二维码数据
    },
  ),
)

可选参数说明

• fit: 设置预览图片适应方式，默认已测试过BoxFit.cover。
• notStartedBuilder: 定义相机加载时显示的内容。
• child: 在QrCamera之上叠加显示的Widget。
• key: 标准Flutter key参数。
• cameraDirection: 指定使用的摄像头方向，默认为后置摄像头。
• offscreenBuilder: 当相机视图不在屏幕时显示的内容。
• onError: 错误回调函数。
• formats: 支持的格式列表，默认支持所有格式。
• direction: 摄像头方向（前后）。

切换闪光灯

当相机正在运行时，可以通过调用QrCamera.toggleFlash()或QrMobileVision.toggleFlash()方法来开关闪光灯。

示例代码

下面是一个完整的示例demo，展示了如何集成和使用qr_mobile_vision插件进行二维码扫描：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:qr_mobile_vision/qr_camera.dart';

void main() {
  debugPaintSizeEnabled = false;
  runApp(const HomePage());
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyApp());
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  String? qr;
  bool camState = false;
  bool dirState = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.light), onPressed: _swapBackLightState),
        ],
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("Back"),
                Switch(value: dirState, onChanged: (val) => setState(() => dirState = val)),
                const Text("Front"),
              ],
            ),
            Expanded(
                child: camState
                    ? Center(
                        child: SizedBox(
                          width: 300.0,
                          height: 600.0,
                          child: QrCamera(
                            onError: (context, error) => Text(
                              error.toString(),
                              style: const TextStyle(color: Colors.red),
                            ),
                            cameraDirection: dirState ? CameraDirection.FRONT : CameraDirection.BACK,
                            qrCodeCallback: (code) {
                              setState(() {
                                qr = code;
                              });
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                color: Colors.transparent,
                                border: Border.all(
                                  color: Colors.orange,
                                  width: 10.0,
                                  style: BorderStyle.solid,
                                ),
                              ),
                            ),
                          ),
                        ),
                      )
                    : const Center(child: Text("Camera inactive"))),
            Text("QRCODE: $qr"),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          child: const Text(
            "on/off",
            textAlign: TextAlign.center,
          ),
          onPressed: () {
            setState(() {
              camState = !camState;
            });
          }),
    );
  }

  _swapBackLightState() async {
    QrCamera.toggleFlash();
  }
}

通过上述内容，你应该能够理解并开始使用qr_mobile_vision插件来进行二维码扫描了。如果有任何问题或者需要进一步的帮助，请随时提问！