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

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

需要帮助?

请不要在问题中提交像“我如何做…?”或“…是什么情况?”这样的问题。这些问题会立即被关闭。如果您有任何问题,请在讨论板或Stack Overflow上提问。它们会在那里得到解答。

使用问题会创建大量噪音,并导致实际问题解决得更慢。

特性

  • 零安全
  • 基于 QR - Dart
  • 自动检测QR码版本/类型或手动输入
  • 支持QR码版本1到40
  • 错误纠正/冗余
  • 可配置输出大小、填充、背景色和前景色
  • 支持图像叠加
  • 导出为图像数据以便保存到文件或内存中使用
  • 不需要互联网连接

安装

版本兼容性: 4.0.0+ 支持零安全并需要兼容的Flutter版本。 如果您使用的是不兼容的Flutter版本,请使用此库的3.x版本。

您应该将以下内容添加到您的pubspec.yaml文件中:

dependencies:
  qr_flutter: ^4.0.0

注意: 如果您正在使用Flutter master通道,并且遇到构建问题,或者想尝试最新的版本,则应使用master分支而不是特定的发布版本。为此,请在pubspec.yaml中使用以下配置:

dependencies:
  qr_flutter:
    git:
      url: git://github.com/lukef/qr.flutter.git

请注意,master分支可能是不稳定的。

在将依赖项添加到您的pubspec.yaml文件后,您可以运行flutter packages get或使用IDE更新您的包。

开始使用

首先,在代码中导入该依赖项:

import 'package:qr_flutter/qr_flutter.dart';

接下来,要渲染一个基本的QR码,您可以使用以下代码(或类似的东西):

QrImage(
  data: "1234567890",
  version: QrVersions.auto,
  size: 200.0,
),

根据您的数据需求,您可能需要调整QR码的输出。可用的选项如下表所示:

属性 类型 描述
version int QrVersions.auto 或介于1到40之间的值。有关限制和详细信息,请参阅http://www.qrcode.com/en/about/version.html
errorCorrectionLevel int QrErrorCorrectLevel上定义的值。例如:QrErrorCorrectLevel.L
size double 图像的(方形)大小。如果没有给出,将使用最短尺寸约束自动调整大小。
padding EdgeInsets 包围QR码数据的填充。
backgroundColor Color 背景颜色(默认为无)。
foregroundColor Color 前景色(默认为黑色)。
gapless bool 添加一个额外的像素以防止间隙(默认为true)。
errorStateBuilder QrErrorBuilder 允许您在渲染QR码时显示错误状态的Widget(例如:版本太低,输入太长等)。
constrainErrorBounds bool 如果为true,错误Widget将被约束在QR码将要绘制的正方形内。如果为false,错误状态Widget将增长/缩小到所需大小。
embeddedImage ImageProvider 定义要在QR码中心叠加的图像的ImageProvider
embeddedImageStyle QrEmbeddedImageStyle 用于设置嵌入图像的样式。
embeddedImageEmitsError bool 如果为true,任何加载嵌入图像失败都会触发errorStateBuilder或呈现一个空的Container。如果为false,QR码将被渲染而嵌入图像将被忽略。
semanticsLabel String semanticsLabel将被屏幕阅读器用来描述QR码的内容。

示例

/example目录下有一个简单的、工作的Flutter应用程序。您可以使用它来玩转所有选项。

此外,以下示例可以让您快速了解如何使用该库。

一个基本的QR码看起来像这样:

QrImage(
  data: 'This is a simple QR code',
  version: QrVersions.auto,
  size: 320,
  gapless: false,
)

带有嵌入图像(来自应用的资源)的QR码看起来像这样:

QrImage(
  data: 'This QR code has an embedded image as well',
  version: QrVersions.auto,
  size: 320,
  gapless: false,
  embeddedImage: AssetImage('assets/images/my_embedded_image.png'),
  embeddedImageStyle: QrEmbeddedImageStyle(
    size: Size(80, 80),
  ),
)

为了在QR码无法验证时显示错误状态:

QrImage(
  data: 'This QR code will show the error state instead',
  version: 1,
  size: 320,
  gapless: false,
  errorStateBuilder: (cxt, err) {
    return Container(
      child: Center(
        child: Text(
          "Uh oh! Something went wrong...",
          textAlign: TextAlign.center,
        ),
      ),
    );
  },
)

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用qr_flutter_fork插件来生成和扫描二维码的代码示例。qr_flutter_forkqr_flutter的一个分支,它解决了一些兼容性问题,并提供了更稳定的二维码功能。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  qr_flutter_fork: ^4.0.0  # 请检查最新版本号

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

2. 生成二维码

下面是一个生成二维码的简单示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('生成二维码'),
        ),
        body: Center(
          child: QrImage(
            data: 'https://flutter.dev',
            version: QrVersions.auto,
            size: 200.0,
            color: Colors.black,
            backgroundColor: Colors.white,
          ),
        ),
      ),
    );
  }
}

在这个示例中,QrImage组件用于生成二维码。data属性是你想要编码为二维码的字符串,这里我们使用了Flutter的官网URL。

3. 扫描二维码

为了扫描二维码,我们需要使用qr_code_scanner插件(注意,这不是qr_flutter_fork的功能,但通常与qr_flutter_fork一起使用来生成和扫描二维码)。首先,在pubspec.yaml中添加依赖:

dependencies:
  qr_code_scanner: ^0.6.1  # 请检查最新版本号

然后,创建一个新的页面来扫描二维码:

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

class QRViewPage extends StatefulWidget {
  @override
  _QRViewPageState createState() => _QRViewPageState();
}

class _QRViewPageState extends State<QRViewPage> {
  final BarcodeScannerController _controller = BarcodeScannerController();
  final GlobalKey qrKey = GlobalKey();

  @override
  void reassemble() {
    super.reassemble();
    if (Platform.isAndroid) {
      _controller?.pauseCamera();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: QRView(
              key: qrKey,
              controller: _controller,
            ),
          ),
          Expanded(
            flex: 1,
            child: FittedBox(
              fit: BoxFit.cover,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    onPressed: () async {
                      await _controller?.resumeCamera();
                    },
                    child: Text('Resume'),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      await _controller.pauseCamera();
                    },
                    child: Text('Pause'),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          String? result = await _controller.scanBarcode('#ff0000');
          if (result != null) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text("Scanned Code: $result")),
            );
          }
        },
        tooltip: 'Scan',
        child: Icon(Icons.scan_wifi),
      ),
    );
  }
}

在这个示例中,我们创建了一个QRViewPage,它包含一个QRView组件用于显示摄像头画面,并允许用户扫描二维码。注意,你需要处理相机的暂停和恢复,以及扫描结果的显示。

4. 使用扫描页面

最后,在你的主应用中导航到扫描页面:

import 'package:flutter/material.dart';
import 'qr_view_page.dart';  // 假设你的扫描页面文件名为 qr_view_page.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('二维码示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => QRViewPage()),
                  );
                },
                child: Text('扫描二维码'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何从主页面导航到二维码扫描页面。

这样,你就完成了一个基本的Flutter应用,它可以生成和扫描二维码。根据实际需求,你可能需要进一步完善和定制这些功能。

回到顶部