Flutter二维码识别插件recognition_qrcode的使用

Flutter二维码识别插件recognition_qrcode的使用

识别图片中的二维码的flutter插件,简单好用

开始使用

采用GoogleMLKit框架,支持识别条形码、二维码等,支持识别包含多个二维码、条形码的图片

添加依赖

pubspec.yaml文件中添加依赖:

dependencies:
  recognition_qrcode: ^2.0.0

然后运行以下命令以安装依赖:

flutter pub get

初始化配置

在使用二维码识别功能之前,需要初始化配置。可以通过调用setConfig方法来设置一些参数。

import 'package:recognition_qrcode/recognition_qrcode.dart';

// 如果使用默认配置可以不配置config
RecognitionManager.setConfig(
      // icon: "assets/bx-right-arrow.png", // 箭头图标: 传路径
      iconWidth: 30, // 箭头图标大小
      iconHeight: 30, // 箭头图标大小
      cancelTitleFontSize: 16, // 右上角取消按钮文字大小
      cancelTitle: "取消", // 右上角取消按钮文字
);

使用识别方法

使用recognition方法来识别图片中的二维码或条形码。该方法接受一个参数,可以是Base64编码的字符串、URL或者文件路径。

RecognitionManager.recognition(
  "https://tool.oschina.net/action/qrcode/generate?data=1231231231&output=image/png&error=L&type=0&margin=7&size=4.png"
).then((result) {
  print("recognition: $result");
}).catchError((onError) {
  print("catchError:$onError");
});

完整示例代码

以下是一个完整的示例代码,展示了如何使用recognition_qrcode插件来识别图片中的二维码。

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

import 'package:image_picker/image_picker.dart';
import 'package:recognition_qrcode/recognition_qrcode.dart';

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

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

class _MyAppState extends State<MyApp> {
  RecognitionResult? result;

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

  // 平台消息是异步的,所以我们在这里进行初始化
  Future<void> initPlatformState() async {
    // 如果小部件从树中被移除,而异步平台消息还在飞行中,则我们希望丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;
    
    RecognitionManager.setConfig(
      // icon: "assets/bx-right-arrow.png",
      iconWidth: 30,
      iconHeight: 30,
      cancelTitleFontSize: 16,
      cancelTitle: "取消",
    );
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              CupertinoButton(
                  child: Text("识别图片"),
                  onPressed: () {
                    final picker = ImagePicker();
                    picker.pickImage(source: ImageSource.gallery)
                        .then((XFile? value) {
                      if (value == null) {
                        return;
                      }
                      RecognitionManager.recognition(value.path)
                          .then((result) {
                        print("RecognitionQrcode: $result");
                        setState(() {
                          this.result = result;
                        });
                      }).catchError((onError) {
                        print("catchError:$onError");
                      });
                    }); 
                  }),
              Text(result?.value ?? ""),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,我可以为你提供一个关于如何在Flutter项目中使用recognition_qrcode插件进行二维码识别的代码案例。首先,确保你已经在你的pubspec.yaml文件中添加了该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  recognition_qrcode: ^0.1.0  # 请检查最新版本号

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

以下是一个简单的Flutter应用示例,展示了如何使用recognition_qrcode插件来识别二维码:

1. 导入必要的包

在你的Dart文件中(例如main.dart),首先导入必要的包:

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:recognition_qrcode/recognition_qrcode.dart';

2. 请求相机权限

你需要在AndroidManifest.xmlInfo.plist中请求相机权限。对于Android,添加以下权限到你的AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

对于iOS,在Info.plist中添加:

<key>NSCameraUsageDescription</key>
<string>Need camera access to scan QR codes</string>

3. 创建Flutter应用

接下来,创建一个简单的Flutter应用,它使用相机来扫描二维码:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QrCodeScannerPage(),
    );
  }
}

class QrCodeScannerPage extends StatefulWidget {
  @override
  _QrCodeScannerPageState createState() => _QrCodeScannerPageState();
}

class _QrCodeScannerPageState extends State<QrCodeScannerPage> {
  final List<CameraDescription> cameras = [];
  CameraDescription? camera;
  String? qrCodeResult = '';

  @override
  void initState() {
    super.initState();
    availableCameras().then((availableCameras) {
      setState(() {
        cameras.clear();
        cameras.addAll(availableCameras);
        camera = cameras.first;
      });
    }).catchError((err) {
      print('Error: ${err.message}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: camera == null
          ? Center(
              child: Text('No camera found'))
          : Center(
              child: CameraPreview(camera)),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            final result = await RecognitionQrCode.scanQrCode(camera!.lensDirection);
            setState(() {
              qrCodeResult = result;
            });
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('QR Code Result'),
                  content: Text(qrCodeResult ?? 'No QR code scanned'),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('OK'),
                    ),
                  ],
                );
              },
            );
          } catch (e) {
            print('Error scanning QR code: ${e.message}');
          }
        },
        tooltip: 'Scan QR Code',
        child: Icon(Icons.qr_code_scanner),
      ),
    );
  }
}

4. 注意事项

  • 确保你已经添加了camera插件作为依赖,因为recognition_qrcode插件依赖于它来进行相机预览。
  • 插件版本可能会更新,请确保你使用的是最新版本,并根据需要调整代码。
  • 在实际项目中,你可能需要处理更多的错误情况和权限请求逻辑。

这个示例展示了如何使用recognition_qrcode插件来扫描二维码并显示结果。你可以根据需要进行进一步的自定义和扩展。

回到顶部