Flutter SDK中如何控制Icon组件的描边宽度（非图标尺寸）

Flutter原生Icon组件本身没有直接提供调整描边宽度的参数，因为Material Icons的outline系列图标是预定义的固定线条宽度矢量图形。不过可以通过以下两种基于SDK内置API的方式实现需求：

方法一：叠加图标模拟描边 #

利用Icons本质是字体字符的特性，通过Stack叠加多个偏移后的同图标，模拟出加粗的描边效果。调整偏移量可以控制描边的宽度：

Stack(
  alignment: Alignment.center,
  children: [
    // 四个方向偏移的图标作为描边层
    Icon(Icons.notifications_outlined, size: 24, color: Colors.black),
    Transform.translate(offset: const Offset(-1, 0), child: Icon(Icons.notifications_outlined, size: 24, color: Colors.black)),
    Transform.translate(offset: const Offset(1, 0), child: Icon(Icons.notifications_outlined, size: 24, color: Colors.black)),
    Transform.translate(offset: const Offset(0, -1), child: Icon(Icons.notifications_outlined, size: 24, color: Colors.black)),
    Transform.translate(offset: const Offset(0, 1), child: Icon(Icons.notifications_outlined, size: 24, color: Colors.black)),
    // 中间的原图标作为填充层
    Icon(Icons.notifications_outlined, size: 24, color: Colors.white),
  ],
)

方法二：CustomPaint自定义绘制 #

通过CustomPaint提取图标的矢量路径，然后设置画笔的strokeWidth属性来精确控制描边宽度：

class CustomStrokeIcon extends StatelessWidget {
  final IconData icon;
  final double size;
  final Color color;
  final double strokeWidth;
  final Color strokeColor;

  const CustomStrokeIcon({
    super.key,
    required this.icon,
    required this.size,
    required this.color,
    required this.strokeWidth,
    required this.strokeColor,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(size, size),
      painter: _StrokeIconPainter(
        icon: icon,
        color: color,
        strokeWidth: strokeWidth,
        strokeColor: strokeColor,
        size: size,
      ),
    );
  }
}

class _StrokeIconPainter extends CustomPainter {
  final IconData icon;
  final double size;
  final Color color;
  final double strokeWidth;
  final Color strokeColor;

  _StrokeIconPainter({
    required this.icon,
    required this.size,
    required this.color,
    required this.strokeWidth,
    required this.strokeColor,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final textPainter = TextPainter(
      text: TextSpan(
        text: String.fromCharCode(icon.codePoint),
        style: TextStyle(
          fontFamily: icon.fontFamily,
          fontSize: this.size,
          color: color,
        ),
      ),
      textDirection: TextDirection.ltr,
    );

    textPainter.layout();
    final offset = Offset(
      (size.width - textPainter.width) / 2,
      (size.height - textPainter.height) / 2,
    );

    // 绘制描边
    final strokePaint = Paint()
      ..color = strokeColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth;

    canvas.save();
    canvas.translate(offset.dx, offset.dy);
    final typeface = Typeface.fromFamily(icon.fontFamily!);
    final glyph = typeface.getGlyphForCodePoint(icon.codePoint);
    canvas.drawPath(glyph.path, strokePaint);
    canvas.restore();

    // 绘制填充图标
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(covariant _StrokeIconPainter oldDelegate) {
    return oldDelegate.icon != icon ||
        oldDelegate.size != size ||
        oldDelegate.color != color ||
        oldDelegate.strokeWidth != strokeWidth ||
        oldDelegate.strokeColor != strokeColor;
  }
}

使用该自定义组件：

CustomStrokeIcon(
  icon: Icons.notifications_outlined,
  size: 24,
  color: Colors.white,
  strokeWidth: 2,
  strokeColor: Colors.black,
)

以上两种方案均基于Flutter SDK内置能力实现，无需引入第三方图标包。

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