Flutter二维码生成插件pretty_qr_code的使用

Pretty QR Code

Pretty QR Code 是一个高度可定制的Flutter小部件，可以轻松渲染二维码。它基于 qr 包构建。

特性

• Live Preview：实时预览
• Shapes：提供多种内置形状（如平滑和圆角），或通过包API创建自定义图案。
• Themes：使用Material主题扩展轻松切换主题。
• Branding：配置嵌入图像显示并调整其样式以满足需求。
• Exporting：保存二维码为图片以供分享、嵌入等用途。
• Customization：通过设置形状颜色或填充渐变来自定义外观。

使用方法

首先按照安装说明添加依赖，并在项目中引入PrettyQrView组件：

PrettyQrView.data(
  data: 'lorem ipsum dolor sit amet',
  decoration: const PrettyQrDecoration(
    image: PrettyQrDecorationImage(
      image: AssetImage('images/flutter.png'),
    ),
  ),
)

对于非字符串数据或需要指定QR版本的情况，可以使用默认构造函数：

@protected
late QrImage qrImage;

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

  final qrCode = QrCode(
    8,
    QrErrorCorrectLevel.H,
  )..addData('lorem ipsum dolor sit amet');

  qrImage = QrImage(qrCode);
}

@override
Widget build(BuildContext context) {
  return PrettyQrView(
    qrImage: qrImage,
    decoration: const PrettyQrDecoration(),
  );
}

注意：不要在build方法内部创建QrImage，这可能会导致UI线程出现不必要的卡顿。

保存符号为图片

使用toImage或toImageAsBytes扩展方法将二维码保存为图片。还可以通过configuration参数设置额外的保存选项，例如像素比率或文本方向。

final qrCode = QrCode.fromData(
  data: 'lorem ipsum dolor sit amet',
  errorCorrectLevel: QrErrorCorrectLevel.H,
);

final qrImage = QrImage(qrCode);
final qrImageBytes = await qrImage.toImageAsBytes(
  size: 512,
  format: ImageByteFormat.png,
  decoration: const PrettyQrDecoration(),
);

更多代码示例请参考example文件夹中的各种可能性。

完整示例Demo

以下是一个完整的示例应用，展示了如何使用pretty_qr_code生成带有装饰效果的二维码，并提供了导出功能。

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

void main() {
  runApp(const PrettyQrExampleApp());
}

class PrettyQrExampleApp extends StatelessWidget {
  const PrettyQrExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.black),
      ),
      home: const PrettyQrHomePage(),
    );
  }
}

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

  @override
  State<PrettyQrHomePage> createState() => _PrettyQrHomePageState();
}

class _PrettyQrHomePageState extends State<PrettyQrHomePage> {
  late QrCode qrCode;
  late QrImage qrImage;
  late PrettyQrDecoration decoration;

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

    qrCode = QrCode.fromData(
      data: 'https://pub.dev/packages/pretty_qr_code',
      errorCorrectLevel: QrErrorCorrectLevel.H,
    );

    qrImage = QrImage(qrCode);

    decoration = const PrettyQrDecoration(
      shape: PrettyQrSmoothSymbol(color: Color(0xFF74565F)),
      image: PrettyQrDecorationImage(
        image: AssetImage('images/flutter.png'),
        position: PrettyQrDecorationImagePosition.embedded,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Pretty QR Code'),
      ),
      body: Center(
        child: PrettyQrView(
          qrImage: qrImage,
          decoration: decoration,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final path = await qrImage.exportAsImage(
            context,
            size: 512,
            decoration: decoration,
          );
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(path == null ? 'Saved' : 'Saved to $path')),
          );
        },
        child: const Icon(Icons.save_alt_outlined),
      ),
    );
  }
}

这个例子展示了如何创建一个简单的Flutter应用程序，该程序生成包含链接的二维码，并允许用户点击按钮将其保存为图片。你可以根据自己的需求修改此代码，例如更改二维码内容、调整样式或添加更多交互元素。