如何在Flutter中为自定义绘制的圆形添加阴影

Question

我正在尝试让一个圆看起来更加立体。因此，我想给它一个阴影，使用Flutter中的Paint类该如何实现呢？

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

- UVic

---

如果您想要一些阴影，可以使用Canvas#drawShadow()方法。 - pskink

像这样 canvas.drawCircle().drawShadow();？我怎么获取路径？ - UVic

像这样 canvas.drawShadow(...) - pskink

"如何获取路径？" - 请参阅路径官方文档。 - pskink

Answer 1

你可以使用MaskFilter来创建阴影效果。在绘制真正的圆形A之前，使用带有略大半径的圆形B的MaskFilter Paint绘制，即可得到带有阴影效果的圆形A。

查看以下代码绘制的圆形。

class Painter extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
    double radius = 100.0;
    canvas.translate(size.width/2, size.height/2); 
    Offset center = Offset(0.0, 0.0);
    // draw shadow first
    Path oval = Path()
        ..addOval(Rect.fromCircle(center: center, radius: radius+10));
    Paint shadowPaint = Paint() 
        ..color = Colors.black.withOpacity(0.3)
        ..maskFilter = MaskFilter.blur(BlurStyle.normal, 50);
    canvas.drawPath(oval, shadowPaint);
    // draw circle
    Paint thumbPaint = Paint()
        ..color = Colors.white
        ..style = PaintingStyle.fill;
    canvas.drawCircle(center, radius, thumbPaint);
  }

  @override
  bool shouldRepaint(Painter oldDelegate) {
    return false;
  }
}

- ukiyoevega

Answer 2

你还可以使用 drawShadow 方法。

@override
void paint(Canvas canvas, Size size) {
  var path = Path();
  var myPaint = Paint();
  var center = Offset(size.width / 2, size.height / 2);

  myPaint.color = Color(0xff007AFF);

  path.addOval(Rect.fromCircle(center: center, radius: 50.0));

  canvas.drawShadow(path, Color(0xff000000), 3, true);
  canvas.drawPath(path, myPaint);
}

结果：

- MeisterRoehrig

Answer 3

将其包装在BoxDecoration中。它具有BoxShadow属性。

您可以按照此链接进行操作。

   new Container(
    decoration: new BoxDecoration(
      color: Colors.white,
      border: new Border.all(
          color: Colors.green,
          width: 5.0,
          style: BorderStyle.solid
      ),
      borderRadius: new BorderRadius.only(
        topLeft: new Radius.elliptical(40.0, 10.0),
        bottomLeft: new Radius.circular(20.0),
      ),
      boxShadow: [
        new BoxShadow(
          color: Colors.red,
          offset: new Offset(20.0, 10.0),
        )
      ],
      image: new DecorationImage(
          image: new AssetImage('assets/images/JL-Logo-150.png'),
      )

- A.S.M.Nesar Uddin

---

我需要定制的画笔。 - UVic

这个链接可以使用自定义绘制阴影，并且功能良好。希望能对您有所帮助。 - A.S.M.Nesar Uddin

@A.S.M.Nesar Uddin 这不是 Java 吗？它怎么能与 Flutter 一起使用呢... - Hasen