Flutter中如何通过Paint类为自定义绘制圆形添加阴影？

嘿，这个需求太常见啦！要给自定义绘制的圆形加上Material风格的柔和阴影，Flutter里有两种很实用的方式，我给你详细说说：

方法1：使用Canvas.drawShadow（推荐，更贴合Material风格） #

Flutter的Canvas自带drawShadow方法，专门用来给路径添加阴影，操作起来非常简洁，而且效果完全符合Material Design的风格：

首先，先定义好你的白色圆形Paint（和你原来的代码一致）：

final thumbPaint = Paint()
  ..color = Colors.white
  ..style = PaintingStyle.fill;

然后在paint方法里，先创建圆形的路径，再绘制阴影，最后绘制白色圆形：

@override
void paint(Canvas canvas, Size size) {
  // 创建圆形路径
  final circlePath = Path()
    ..addOval(Rect.fromCircle(
      center: Offset(size.width / 2, size.height / 2),
      radius: 20, // 替换成你需要的圆形半径
    ));

  // 绘制Material风格阴影
  // 参数说明：路径、阴影颜色、模糊半径、是否填充路径（true对应fill风格）
  canvas.drawShadow(
    circlePath,
    Colors.grey.withOpacity(0.6), // 带透明度的阴影更自然
    5.0, // 模糊半径，数值越大阴影扩散范围越广
    true,
  );

  // 最后绘制白色圆形，覆盖在阴影上层
  canvas.drawCircle(
    Offset(size.width / 2, size.height / 2),
    20,
    thumbPaint,
  );
}

方法2：使用双Paint分层绘制（手动控制阴影偏移） #

如果你需要更精细地控制阴影的偏移方向和位置，可以用两个Paint分别绘制阴影层和圆形层：

// 阴影专用Paint
final shadowPaint = Paint()
  ..color = Colors.grey.withOpacity(0.6)
  ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 5.0) // 模糊效果
  ..style = PaintingStyle.fill;

// 你的白色圆形Paint
final thumbPaint = Paint()
  ..color = Colors.white
  ..style = PaintingStyle.fill;

@override
void paint(Canvas canvas, Size size) {
  // 先绘制阴影层，稍微偏移（比如右下偏移2px，模拟Material的光照方向）
  canvas.drawCircle(
    Offset(size.width / 2 + 2, size.height / 2 + 2),
    20,
    shadowPaint,
  );

  // 再绘制白色圆形，覆盖在阴影上
  canvas.drawCircle(
    Offset(size.width / 2, size.height / 2),
    20,
    thumbPaint,
  );
}

小技巧调整阴影效果 #

• 模糊半径：数值越大，阴影越柔和扩散范围越广，Material Design里elevation=2对应的模糊半径大概是4，elevation=4大概是8，你可以根据需要调整。
• 阴影颜色：推荐使用带透明度的灰色系，比如Colors.black.withOpacity(0.2)或者Colors.grey.withOpacity(0.5)，这样阴影不会太突兀。
• 偏移量：方法2里的偏移值可以调整，比如左上偏移模拟反向光照，完全看你的UI需求。

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