Flutter开发中如何为自定义Icon填充内部指定颜色

原始未填充样式：

预期填充后效果：

方案1：使用SVG格式图标+flutter_svg库（最推荐） #

矢量格式可以完美适配多分辨率，精准控制路径填充，不会出现颜色溢出问题，是这类需求的最优解。

• 优先向设计师索要图标SVG源文件，也可以用转换工具将现有PNG转成SVG格式
• 在pubspec.yaml中添加依赖：flutter_svg: ^2.0.10
• 调用SvgPicture组件直接设置填充色：

SvgPicture.asset(
  'assets/icons/custom_icon.svg',
  // 填充内部颜色
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
  // 按需设置描边颜色
  // strokeColor: Colors.black,
  width: 24,
  height: 24,
)

方案2：PNG图标快速填充方案 #

如果只能使用PNG格式图标，且图标内部为规则形状，可以用Stack叠加快速实现效果：

Stack(
  alignment: Alignment.center,
  children: [
    // 内部填充色块，大小和图标匹配
    Container(
      width: 24,
      height: 24,
      color: Colors.blue,
    ),
    // 上层线框图标
    Image.asset(
      'assets/icons/original_icon.png',
      width: 24,
      height: 24,
      color: Colors.black,
    )
  ],
)

注意：该方案仅适用于规则形状图标，异形图标使用会出现填充色溢出的问题，不推荐长期使用。

方案3：自定义CustomPaint绘制 #

如果需要后续做颜色渐变、填充动画等复杂效果，可以自定义绘制图标：

• 用SVG转Flutter Path工具将图标路径转换为Dart代码
• 实现CustomPainter分别绘制填充层和描边层：

class CustomIconPainter extends CustomPainter {
  final Color fillColor;
  final Color strokeColor;

  CustomIconPainter({required this.fillColor, required this.strokeColor});

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制内部填充
    final fillPaint = Paint()
      ..color = fillColor
      ..style = PaintingStyle.fill;
    Path fillPath = Path(); // 填入转换后的填充路径代码
    canvas.drawPath(fillPath, fillPaint);

    // 绘制外层描边
    final strokePaint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
    Path strokePath = Path(); // 填入转换后的描边路径代码
    canvas.drawPath(strokePath, strokePaint);
  }

  @override
  bool shouldRepaint(covariant CustomIconPainter oldDelegate) {
    return fillColor != oldDelegate.fillColor || strokeColor != oldDelegate.strokeColor;
  }
}

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