Flutter 绘制内阴影

咱们先看效果

Flutter 内阴影组合控件实现

Container(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    clipBehavior: Clip.antiAlias,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100)),
    child: Stack(
      children: [
        Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(100)),
          child: Text("SB",style: TextStyle(color: Colors.white,fontSize: 18),),
        ),
        ColorFiltered(
          colorFilter:
              ColorFilter.mode(Colors.blue, BlendMode.srcOut),
          child: ImageFiltered(
            imageFilter: ImageFilter.blur(
                sigmaX: 30, sigmaY: 30, tileMode: TileMode.decal),
            child: Container(
              decoration: BoxDecoration(
                  color: Colours.red.color(),
                  borderRadius: BorderRadius.circular(100)),
            ),
          ),
        ),

      ],
    ),
  ),
)

canvas绘制

canvas.translate(size.width / 2, size.height / 2);
var circlePathSize = min(size.width, size.height);
var radius = circlePathSize / 2;

final Paint shadowPaint = Paint()
  ..blendMode = BlendMode.srcATop
  ..colorFilter =
      ColorFilter.mode(Colours.themeHighlight.color(), BlendMode.srcOut)
  ..imageFilter = ImageFilter.blur(sigmaX: 10, sigmaY: 10);
canvas.saveLayer(
    Rect.fromCircle(center: Offset.zero, radius: radius), _paint);
canvas.drawCircle(Offset.zero, radius, _paint);
canvas.saveLayer(
    Rect.fromCircle(center: Offset.zero, radius: radius), shadowPaint);
canvas.drawCircle(Offset.zero, radius, _paint);
canvas.restore();
canvas.restore();

渐变实现

final Paint shadowPaint = Paint();
final rect = Rect.fromLTWH(0 - radius, 0 - radius, radius * 2, radius * 2);
shadowPaint.shader = RadialGradient(
  stops: const [0.8, 1.0],
  colors: <Color>[
    Colors.transparent,
    Colours.gray.color().withOpacity(0.7)
  ],
).createShader(rect);
canvas.drawCircle(Offset.zero, radius, shadowPaint);