Flutter应用生成带中间Logo/文字的自定义二维码实现方法问询

核心思路 #

二维码本身具备容错机制（选H级容错可容忍30%区域被遮挡），无需复杂自定义生成逻辑，直接用Stack组件在基础二维码上层叠加Logo或文字即可。

步骤1：引入基础二维码生成包 #

在pubspec.yaml中添加依赖：

dependencies:
  qr_flutter: ^4.1.0

执行flutter pub get完成安装。

步骤2：生成基础二维码 #

先实现普通二维码的基础生成逻辑：

import 'package:qr_flutter/qr_flutter.dart';

QrImageView(
  data: "https://your-target-url.com", // 二维码承载的内容
  version: QrVersions.auto,
  size: 200.0,
  errorCorrectionLevel: QrErrorCorrectLevel.H, // 高容错率，保障遮挡后仍可扫描
)

步骤3：叠加Logo #

用Stack将Logo居中放在二维码上层，示例代码：

Stack(
  alignment: Alignment.center,
  children: [
    // 底层二维码
    QrImageView(
      data: "https://your-target-url.com",
      version: QrVersions.auto,
      size: 200.0,
      errorCorrectionLevel: QrErrorCorrectLevel.H,
    ),
    // 上层Logo容器
    Container(
      width: 40.0, // Logo建议设为二维码尺寸的1/5左右，避免遮挡过多识别点
      height: 40.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0), // 可选：给Logo添加圆角
        color: Colors.white, // 加白色背景，确保Logo与二维码对比清晰
      ),
      child: Image.asset("assets/your-logo.png"), // 本地Logo资源
      // 若用网络Logo：child: Image.network("https://your-logo-url.com"),
    ),
  ],
)

步骤4：叠加自定义文字 #

如果需要添加文字，同样通过Stack实现，示例：

Stack(
  alignment: Alignment.center,
  children: [
    QrImageView(
      data: "https://your-target-url.com",
      version: QrVersions.auto,
      size: 200.0,
      errorCorrectionLevel: QrErrorCorrectLevel.H,
    ),
    // 中间叠加文字
    Text(
      "专属标识",
      style: TextStyle(
        color: Colors.white,
        fontSize: 12,
        fontWeight: FontWeight.bold,
        backgroundColor: Colors.black54, // 加半透明背景提升文字可读性
      ),
    ),
  ],
)

关键注意事项 #

• 必须将容错率设为QrErrorCorrectLevel.H或Q，否则遮挡后可能无法正常扫描
• Logo尺寸控制在二维码的1/4~1/5区间，过大容易破坏二维码的定位识别点
• 确保Logo/文字与二维码颜色对比强烈（比如深色二维码配浅色Logo，反之亦然）
• 若需更复杂的样式（如修改二维码色块形状），可基于qr_flutter源码调整，但初学者用叠加法足够满足需求

内容的提问来源于stack exchange，提问作者wannaB