Flutter使用pretty_qr_code生成高颜值二维码

前言

最近在项目里需要实现自定义样式、带Logo、渐变色 的高颜值二维码功能，对比多款插件后，pretty_qr_code凭借丰富的定制能力、简洁API和多平台适配性脱颖而出。 本文基于pretty_qr_code: ^3.6.0版本编写，适配Flutter 3.0+，支持iOS、Android、Windows、Web全平台，可满足基础生成、样式定制、Logo嵌入、图片导出等全场景需求。

官方文档：传送门

1. 插件核心API

pretty_qr_code的核心由主组件 与装饰配置类组成，参数清晰易扩展，是实现定制化二维码的核心。

1.1 核心组件：PrettyQrView

负责渲染二维码的主组件，支持直接传入数据快速生成。

属性	类型	必填	说明
data	String	是	二维码承载的内容（链接/文本/数字等）
size	double	否	二维码尺寸，默认自适应父容器
decoration	PrettyQrDecoration	否	二维码样式装饰（形状/颜色/Logo）
errorCorrectionLevel	QrErrorCorrectLevel	否	纠错级别，默认high（30%容错）
backgroundColor	Color	否	二维码背景色，默认白色
clipBehavior	Clip	否	裁剪模式，默认Clip.hardEdge

1.2 核心配置类：PrettyQrDecoration

二维码样式定制核心，控制形状、颜色、Logo、边距等。

属性	类型	说明
shape	PrettyQrShape	码点形状（方形/圆形/圆角/水滴等）
color	Color	二维码纯色（与渐变二选一）
gradient	Gradient	二维码渐变色（与纯色二选一）
image	PrettyQrDecorationImage	中间嵌入的Logo配置
quietZone	PrettyQrQuietZone	二维码边距（空白区域）

1.3 常用枚举/子类

• PrettyQrShape：square（方形）、circle（圆形）、rounded（圆角）、fluid（水滴）、diamond（菱形）
• QrErrorCorrectLevel：low(7%)、medium(15%)、quartile(25%)、high(30%)
• PrettyQrDecorationImage：配置Logo图片、尺寸、边距

2. 基础使用

2.1 引入依赖

在pubspec.yaml中添加最新版依赖：

dependencies:
  flutter:
    sdk: flutter
  pretty_qr_code: ^3.6.0

执行flutter pub get安装依赖。

2.2 最简二维码生成

无需任何定制，一行代码生成标准二维码：

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

// 最简二维码
PrettyQrView.data(
  data: 'https://flutter.dev', // 二维码内容
  size: 200, // 尺寸
)

2.3 带基础样式的二维码

快速配置形状与颜色，提升美观度：

PrettyQrView.data(
  data: 'https://flutter.dev',
  size: 200,
  decoration: const PrettyQrDecoration(
    // 圆形码点
    shape: PrettyQrShape.circle(),
    // 二维码颜色
    color: Color(0xFF6200EE),
    // 边距
    quietZone: PrettyQrQuietZone.standard,
  ),
)

3. 高级功能定制

3.1 自定义码点形状

支持多种预设形状，轻松切换风格：

// 圆角码点
PrettyQrShape.rounded(radius: 8)
// 水滴形状
PrettyQrShape.fluid()
// 菱形码点
PrettyQrShape.diamond()

3.2 渐变色二维码

告别单色，支持线性/径向渐变：

PrettyQrView.data(
  data: 'https://flutter.dev',
  size: 200,
  decoration: PrettyQrDecoration(
    shape: const PrettyQrShape.rounded(),
    // 线性渐变
    gradient: const LinearGradient(
      colors: [Color(0xFF6200EE), Color(0xFF03DAC6)],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

3.3 嵌入中间Logo

支持本地资源/网络图片Logo，自带容错保护：

PrettyQrView.data(
  data: 'https://flutter.dev',
  size: 220,
  decoration: const PrettyQrDecoration(
    shape: PrettyQrShape.circle(),
    color: Color(0xFF6200EE),
    // 嵌入Logo
    image: PrettyQrDecorationImage(
      image: AssetImage('assets/images/logo.png'), // 本地图片
      // image: NetworkImage('https://xxx.com/logo.png'), // 网络图片
      size: 40, // Logo尺寸
      padding: EdgeInsets.all(4), // Logo内边距
    ),
  ),
)

3.4 自定义纠错级别

根据场景调整容错率，Logo较大时建议用最高级别：

PrettyQrView.data(
  data: 'https://flutter.dev',
  // 最高纠错级别（30%容错，适合带大Logo）
  errorCorrectionLevel: QrErrorCorrectLevel.high,
)

3.5 自定义背景与边框

PrettyQrView.data(
  data: 'https://flutter.dev',
  size: 200,
  backgroundColor: const Color(0xFFF5F5F5), // 背景色
  decoration: const PrettyQrDecoration(
    shape: PrettyQrShape.square(),
    color: Color(0xFF2196F3),
  ),
)

4. 二维码导出与保存

pretty_qr_code仅负责渲染，导出图片需结合flutter_screenutil、screenshot、gal插件实现截图→保存相册，适配全平台。

4.1 新增依赖

dependencies:
  pretty_qr_code: ^3.6.0
  screenshot: ^3.0.0
  gal: ^2.3.2
  permission_handler: ^11.3.1

4.2 权限配置

• Android （AndroidManifest.xml）：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>

• iOS （Info.plist）：

<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问相册以保存二维码图片</string>

4.3 导出保存代码实现

import 'package:flutter/material.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:screenshot/screenshot.dart';
import 'package:gal/gal.dart';
import 'package:permission_handler/permission_handler.dart';

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

  @override
  State<QrCodeExportPage> createState() => _QrCodeExportPageState();
}

class _QrCodeExportPageState extends State<QrCodeExportPage> {
  final ScreenshotController _screenshotController = ScreenshotController();

  // 保存二维码到相册
  Future<void> _saveQrCodeToGallery() async {
    // 申请权限
    final status = await Permission.storage.request();
    if (!status.isGranted) {
      debugPrint('权限申请失败');
      return;
    }

    // 截图
    final imageBytes = await _screenshotController.capture(
      pixelRatio: 2.0, // 高清导出
      delay: const Duration(milliseconds: 20),
    );

    if (imageBytes == null) {
      debugPrint('截图失败');
      return;
    }

    // 保存到相册
    await Gal.putImageBytes(imageBytes, album: 'Flutter二维码');
    debugPrint('保存成功');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('二维码导出')),
      body: Center(
        child: Screenshot(
          controller: _screenshotController,
          child: PrettyQrView.data(
            data: 'https://flutter.dev',
            size: 200,
            decoration: const PrettyQrDecoration(
              shape: PrettyQrShape.circle(),
              color: Color(0xFF6200EE),
              image: PrettyQrDecorationImage(
                image: AssetImage('assets/images/logo.png'),
                size: 40,
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _saveQrCodeToGallery,
        child: const Icon(Icons.save),
      ),
    );
  }
}

5. 注意事项

1. Logo大小限制 ：Logo尺寸建议不超过二维码整体的20% ，避免扫码失败；纠错级别建议使用high。
2. 图片模糊问题 ：导出时将pixelRatio设为1.5~3.0，可提升清晰度，兼顾体积与画质。
3. Platform View不兼容：二维码内嵌套WebView、地图等原生组件会渲染异常，仅支持Flutter纯组件。
4. 数据长度限制：内容越长二维码越复杂，建议短链接/精简文本，过长会降低扫码成功率。
5. Web平台适配 ：导出图片需通过浏览器API处理，captureAndSave不支持Web端。
6. 性能优化：页面内大量渲染二维码时，建议固定尺寸并缓存组件，避免重复重建。

6. 总结

pretty_qr_code 3.6.0是Flutter生态中定制能力最强、使用最简单的二维码生成插件，完美覆盖：

• 基础二维码快速生成
• 形状/颜色/渐变全样式定制
• 中间Logo嵌入
• 高清导出与相册保存

配合截图与权限插件，可快速实现商业级二维码功能，适配全平台、易扩展、易维护，是开发中生成高颜值二维码的首选方案。

本文仅是基础案例，实际项目可结合主题、动画、交互实现更丰富的二维码效果，欢迎在评论区交流探讨～

---

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章

• Flutter使用Gal展示和保存图片资源
• Flutter使用package_info_plus库获取应用信息的教程
• Flutter下拉刷新上拉加载侧拉刷新插件：easy_refresh全面使用指南
• Flutter-使用EventBus实现组件间数据通信
• Flutter输入框TextField的属性与实战用法全面解析+示例
• Flutter自定义日历table_calendar完全指南+案例
• Flutter-屏幕自适应插件flutter_screenutil教程全指南
• Flutter-使用url_launcher打开链接/应用/短信/邮件和评分跳转等
• Flutter图片选择库multi_image_picker_plus和image_picker的对比和使用解析
• 解锁Flutter弹窗新姿势：dialog-flutter_smart_dialog插件解读+案例
• Flutter-切换状态显示不同组件10种实现方案全解析
• Flutter-详解控制组件显示的两种方式Offstage与Visibility
• Flutter-使用AnimatedDefaultTextStyle实现文本动画
• Flutter-使用SafeArea组件处理各机型的安全距离
• Flutter-实现渐变色边框背景以及渐变色文字
• Flutter-使用confetti制作炫酷纸屑爆炸粒子动画