Flutter二维码生成与扫描插件ez_qr的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter二维码生成与扫描插件ez_qr的使用

pub points pub points pub points License: MIT style: effective dart All Contributors

ez_qr Awesome Flutter

This is a forked package from @hetian9288

ez_qr

QR code (scan code/picture) recognition(AndroidView/UiKitView)

一个允许你通过原生相机读取二维码并通过图像/文件获取信息的包,并且具有自定义视图的灵活性。

当前支持的功能

  • 支持Android和iOS设备
  • 将二维码放在方形/自定义形状框内以获取二维码中的信息
  • 从ScanView内的图像选择器中选择本地库中的二维码
  • 使用OS默认的原生相机
  • 接受不同类型的标准和自定义形状(媒体、图像、视频、音频等)

如果你希望在这个包中看到任何功能,请随时提出建议。🎉

带有默认视图的二维码阅读器

import 'package:ez_qr/ez_qr.dart';

void main() => runApp(MyApp());

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

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String result = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Package example app'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 32),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                String? results = await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ScanView(
                      cornerColor: Colors.blue, // 自定义角颜色
                    ),
                  ),
                );

                if (results != null) {
                  setState(() {
                    result = results; // 设置扫描结果
                  });
                }
              },
              child: Text('Tap to scan'), // 扫描按钮文本
            ),
            Center(child: Text(result)), // 显示扫描结果
          ],
        ),
      ),
    );
  }
}

对于iOS

要启用嵌入式视图预览,需在应用的Info.plist文件中添加一个带有键io.flutter.embedded_views_preview和值YES的布尔属性。

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

并且你需要提供相机权限的描述,否则应用程序会崩溃。

<key>NSCameraUsageDescription</key>
<string>用于解释为什么需要使用相机的目的描述</string>

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

1 回复

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


ez_qr 是一个用于 Flutter 的二维码生成与扫描插件。它提供了简单易用的 API,可以快速生成二维码图片,并且支持扫描二维码。以下是使用 ez_qr 插件进行二维码生成与扫描的基本步骤。

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 ez_qr 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  ez_qr: ^1.0.0  # 请使用最新版本

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

2. 生成二维码

使用 ez_qr 生成二维码非常简单。以下是一个生成二维码的示例:

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

class QRCodeGenerator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Generator'),
      ),
      body: Center(
        child: EzQr(
          data: 'https://flutter.dev', // 要生成二维码的数据
          size: 200.0, // 二维码的大小
          backgroundColor: Colors.white, // 背景颜色
          foregroundColor: Colors.black, // 前景颜色
        ),
      ),
    );
  }
}

在这个示例中,EzQr 小部件用于生成二维码。你可以通过 data 属性指定要生成二维码的数据,通过 size 属性指定二维码的大小,通过 backgroundColorforegroundColor 属性指定二维码的背景颜色和前景颜色。

3. 扫描二维码

ez_qr 插件还提供了扫描二维码的功能。以下是一个扫描二维码的示例:

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

class QRCodeScanner extends StatelessWidget {
  Future<void> _scanQRCode(BuildContext context) async {
    try {
      String qrResult = await EzQr.scan();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Scanned QR Code: $qrResult')),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to scan QR Code: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _scanQRCode(context),
          child: Text('Scan QR Code'),
        ),
      ),
    );
  }
}

在这个示例中,EzQr.scan() 方法用于启动二维码扫描。扫描结果会以字符串的形式返回。如果扫描成功,结果会显示在 SnackBar 中;如果扫描失败,错误信息也会显示在 SnackBar 中。

4. 运行应用

将上述代码整合到你的 Flutter 应用中,并运行应用。你可以通过点击按钮来扫描二维码,或者直接在页面上显示生成的二维码。

5. 注意事项

  • 在 Android 设备上,扫描二维码需要相机权限。确保在 AndroidManifest.xml 中添加相机权限:

    <uses-permission android:name="android.permission.CAMERA" />
  • 在 iOS 设备上,扫描二维码需要相机权限。确保在 Info.plist 中添加相机权限描述:

    <key>NSCameraUsageDescription</key>
    <string>We need access to your camera to scan QR codes.</string>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!