Flutter中实现容器渐变背景及透明小钻石图案的方法

1. 替换渐变背景 #

将原有纯色背景替换为渐变效果，匹配设计图的色彩过渡：

decoration: BoxDecoration(
  border: Border.all(
    width: 0.1,
    color: i % 2 == 0 ? Colors.transparent : Colors.black,
  ),
  boxShadow: const [
    BoxShadow(
      spreadRadius: 0.1,
      color: Colors.blueGrey,
      blurRadius: 0.5,
      offset: Offset(0, 0),
    ),
  ],
  borderRadius: const BorderRadius.all(Radius.circular(10)),
  // 替换为渐变背景，可根据设计图调整色值和方向
  gradient: i % 2 == 0 
      ? LinearGradient(colors: [Colors.white, Colors.grey.shade100])
      : LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [const Color(0xFF023047), const Color(0xFF219EBC)],
        ),
),

2. 添加重复透明钻石背景 #

先创建自定义Painter绘制交错排列的钻石图案：

class DiamondPatternPainter extends CustomPainter {
  final Color color;
  final double size;
  final double spacing;

  DiamondPatternPainter({
    required this.color,
    this.size = 12,
    this.spacing = 16,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    final rows = (size.height / spacing).ceil() + 1;
    final cols = (size.width / spacing).ceil() + 1;

    for (int row = 0; row < rows; row++) {
      for (int col = 0; col < cols; col++) {
        double x = col * spacing;
        double y = row * spacing;
        // 奇数行偏移实现交错排列
        if (row % 2 != 0) x += spacing / 2;

        final path = Path()
          ..moveTo(x, y - this.size / 2)
          ..lineTo(x + this.size / 2, y)
          ..lineTo(x, y + this.size / 2)
          ..lineTo(x - this.size / 2, y)
          ..close();

        canvas.drawPath(path, paint);
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

然后用Stack将钻石图案层叠加在卡片背景上：

Container(
  decoration: BoxDecoration(
    // 保留原有边框、阴影、渐变配置
    border: Border.all(
      width: 0.1,
      color: i % 2 == 0 ? Colors.transparent : Colors.black,
    ),
    boxShadow: const [
      BoxShadow(
        spreadRadius: 0.1,
        color: Colors.blueGrey,
        blurRadius: 0.5,
        offset: Offset(0, 0),
      ),
    ],
    borderRadius: const BorderRadius.all(Radius.circular(10)),
    gradient: i % 2 == 0 
        ? LinearGradient(colors: [Colors.white, Colors.grey.shade100])
        : LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [const Color(0xFF023047), const Color(0xFF219EBC)],
          ),
  ),
  child: Stack(
    children: [
      // 仅在深色卡片显示钻石背景
      if (i % 2 != 0)
        Positioned.fill(
          child: CustomPaint(
            painter: DiamondPatternPainter(
              color: Colors.white.withOpacity(0.15),
              size: 12,
              spacing: 20,
            ),
          ),
        ),
      // 原有卡片内容，嵌套在Padding中
      Padding(
        padding: const EdgeInsets.all(14),
        child: Column(
          children: [
            // 此处保留原有Row、Column等布局代码，仅调整字体颜色
            Row(
              children: [
                const Image(
                  image: AssetImage('./assets/svg/diamond.png'),
                  height: 30,
                  width: 30,
                ),
                const SizedBox(width: 20),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Diamond Premium',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        // 根据卡片类型动态切换字体颜色
                        color: i % 2 == 0 ? Colors.blueGrey : Colors.white,
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.green[800],
                        border: Border.all(
                          color: Colors.greenAccent.shade100.withAlpha(50),
                          width: 0.5,
                        ),
                        borderRadius: const BorderRadius.all(Radius.circular(20)),
                      ),
                      margin: const EdgeInsets.only(top: 2),
                      padding: const EdgeInsets.fromLTRB(5, 2, 5, 2),
                      child: Text(
                        'Current',
                        style: TextStyle(
                          color: i % 2 == 0 ? Colors.blueGrey : Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            // 剩余内容同理，将所有cc替换为动态颜色判断
            // ... 原有剩余代码
          ],
        ),
      ),
    ],
  ),
),

3. 字体颜色统一修正 #

将所有使用cc的字体颜色替换为动态判断逻辑，匹配设计图的明暗对比：

// 替换前
color: cc,
// 替换后
color: i % 2 == 0 ? Colors.blueGrey : Colors.white,

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