让我们实现一个更好看的内部阴影按钮

关键代码

  @override
  void paint(Canvas canvas, Size size) {
    var rect = RRect.fromLTRBR(0, 0, size.width, size.height,Radius.circular(20));

    canvas.save();
    var topLeftPath = Path()..addRRect(RRect.fromLTRBR(0, 0, size.width * 9/ 10 , size.height * 9/ 10 ,Radius.circular(20)).shift(Offset(-5, -5)));
    var topLeftPainter = Paint()
      ..color = Colors.white.withValues(alpha: 0.8)
      ..maskFilter = MaskFilter.blur(
          BlurStyle.normal, 10
      );
    canvas.drawPath(topLeftPath, topLeftPainter);

    var bottomRightPath = Path()..addRRect(RRect.fromLTRBR(size.width / 10, size.height / 10, size.width  , size.height ,Radius.circular(20)).shift(Offset(5, 5)));
    var bottomRightPainter = Paint()
      ..color = Colors.black.withValues(alpha: 0.8)
      ..maskFilter = MaskFilter.blur(
          BlurStyle.normal, 10
      );
    canvas.drawPath(bottomRightPath, bottomRightPainter);
    canvas.restore();

    var contentPath = Path()..addRRect(rect);

    var contentPainter = Paint()
      ..color = Colors.grey;
    canvas.drawPath(contentPath, contentPainter);


    canvas.save();
    var topLeftInnerPath = Path()..addRRect(RRect.fromLTRBR(0, 0, size.width , size.height ,Radius.circular(20)).shift(Offset(-size.width * 1 /4, -size.height  * 1/4)));
    canvas.clipRRect(rect.deflate(2));
    var topLeftInnerPainter = Paint()
      ..color = Colors.black.withAlpha(100)
      ..maskFilter = MaskFilter.blur(
          BlurStyle.normal, 30
      );

    canvas.drawPath(topLeftInnerPath, topLeftInnerPainter);

    var bottomRightInnerPath = Path()..addRRect(RRect.fromLTRBR(0, 0, size.width , size.height ,Radius.circular(20)).shift(Offset(size.width * 1 /4, size.height  * 1/4)));
    canvas.clipRRect(rect);
    var bottomRightInnerPainter = Paint()
      ..color = Colors.white.withAlpha(100)
      ..maskFilter = MaskFilter.blur(
          BlurStyle.normal, 30
      );
    canvas.drawPath(bottomRightInnerPath, bottomRightInnerPainter);

    canvas.restore();

  }