Flutter中如何通过pretty_qr_code设置二维码背景色和条形码颜色

在Flutter中使用pretty_qr_code生成二维码时，如何自定义背景色和条形码颜色？我尝试了文档中的参数但效果不对，希望能提供具体的代码示例说明如何正确设置这两个颜色属性。

2 回复

使用pretty_qr_code设置二维码背景色和条形码颜色：

PrettyQr(
  data: '二维码内容',
  size: 200,
  roundEdges: true,
  elementColor: Colors.blue, // 条形码颜色
  image: AssetImage('assets/icon.png'),
)

背景色通过外层Container的color属性设置。

更多关于Flutter中如何通过pretty_qr_code设置二维码背景色和条形码颜色的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 pretty_qr_code 包自定义二维码颜色，可以通过以下属性设置：

关键属性：

  • backgroundColor：设置二维码背景颜色
  • color：设置二维码前景色（条形码颜色）

示例代码：

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

class CustomQRCode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PrettyQr(
      // 二维码数据
      data: 'https://example.com',
      // 设置背景色为浅蓝色
      backgroundColor: Colors.blue[50],
      // 设置二维码条形码颜色为深蓝色
      color: Colors.blue[900],
      // 可选：设置尺寸
      size: 200,
      // 可选：设置错误纠正级别
      errorCorrectLevel: QrErrorCorrectLevel.M,
    );
  }
}

说明：

  • 使用 Colors 类或 Color(0xFF...) 格式定义颜色
  • 支持透明度设置
  • 可结合 BoxDecoration 实现更复杂的背景效果

注意事项：

  • 确保前景色与背景色有足够对比度，保证二维码可扫描
  • 建议使用 Material Design 的颜色系统保持界面一致性
回到顶部