Flutter二维码生成与展示插件qr_widget的使用

简介

QR.Widget 是一个用于在Flutter中简单快速地渲染二维码的库。它通过Widget或自定义Painter来实现二维码的显示。

特性

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

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  qr_widget: ^4.1.0

如果使用Flutter的 master 分支，可以使用以下配置：

dependencies:
  qr_widget:
    git:
      url: git://github.com/vanyasem/qr.widget.git

添加依赖后运行 flutter packages get 或使用IDE更新包。

入门指南

首先，在代码中导入依赖：

import 'package:qr_widget/qr_widget.dart';

接下来，使用以下代码渲染基本的二维码：

QrImageView(
  data: '1234567890',
  version: QrVersions.auto,
  size: 200.0,
),

属性说明

示例

基本示例

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

带有嵌入图像的示例

QrImageView(
  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),
  ),
)

错误状态示例

QrImageView(
  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_widget：

/*
 * QR.Widget
 * Copyright (c) 2019-2023 the QR.Widget authors.
 * See LICENSE for distribution and usage details.
 */

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:qr_widget/qr_widget.dart';

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

/// The example application class
class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );
    return MaterialApp(
      title: 'QR.Widget',
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Example'),
      ),
      body: Center(
        child: QrImageView(
          data: 'Hello, World!',
          version: QrVersions.auto,
          size: 320,
          gapless: false,
          embeddedImage: AssetImage('assets/images/my_embedded_image.png'),
          embeddedImageStyle: QrEmbeddedImageStyle(
            size: Size(80, 80),
          ),
        ),
      ),
    );
  }
}

确保将图像资源添加到您的项目中，并在 pubspec.yaml 中正确声明。

致谢与许可

感谢 Kevin Moore 的 QR - Dart 库，它是这个库的核心。QR.Widget 发布在 BSD-3 许可下。