flutter - How to create an inner shadow for custom shape in Flutter?

Question

Below is the custom shape I've want to give an inner shadow to :

Below is the code I've used to create this shape : (The text part is not included in the code)

class TitleContainerPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint

    Paint x = Paint()..color = Colors.grey ..style = PaintingStyle.fill;
    Path a = Path();

    a.moveTo(size.height * 0.5, 0);
    a.lineTo(size.width * 0.3, 0);
    a.cubicTo(size.width * 0.325, 0, size.width * 0.325, size.height * 0.5 - 10, size.width * 0.35, size.height * 0.5 - 10);
    a.lineTo(size.width * 0.825, size.height * 0.35);
    a.cubicTo(size.width * 0.85, size.height * 0.5 - 10, size.width * 0.85, size.height * 0.15, size.width * 0.875, size.height * 0.15);
    a.lineTo(size.width - size.height * 0.25, size.height * 0.15);
    a.arcTo(Rect.fromCircle(center: Offset(size.width - size.height * 0.35,size.height * 0.5), radius: size.height * 0.35), -pi/2, pi, false);
    a.lineTo(size.width * 0.875, size.height * 0.85);
    a.cubicTo(size.width * 0.85, size.height * 0.85, size.width * 0.85, size.height * 0.5 + 10, size.width * 0.825, size.height * 0.5 + 10);
    a.lineTo(size.width * 0.35, size.height * 0.65);
    a.cubicTo(size.width * 0.325, size.height * 0.5 + 10, size.width * 0.325, size.height, size.width * 0.3, size.height);
    a.lineTo(size.height * 0.5, size.height);
    a.arcTo(Rect.fromCircle(center: Offset(size.height * 0.5,size.height * 0.5), radius: size.height * 0.5), pi/2, pi, false);

    canvas.drawPath(a, x);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }


}

As mentioned in the question, my goal is to add an inner shadow to this shape like the image below :

Can someone please help me achieve this?

Thankyou in advance.

score 1 · Accepted Answer

像这样使用你的颜料：

Paint x = Paint()
      ..style = PaintingStyle.fill
      ..maskFilter = MaskFilter.blur(BlurStyle.inner, 5)
      ..color = Colors.grey;

输出：

score 0 · Accepted Answer

//像这样改变你的灰色的alpha颜色

canvas.drawShadow(path, Colors.grey.withAlpha(50), -4.0, false);

在这里，阴影将是内部的。

score 0 · Accepted Answer

I propose the same approach as given in my other answer. In your case you just use the CustomPaint widget as the child for the inner shadow widget:

InnerShadow(
  shadow: const BoxShadow(
    blurRadius: 20,
    color: Colors.black,
  ),
  child: CustomPaint(painter: TitleContainerPaint()),
)

The complete code could be found here https://codepen.io/priezz/pen/abBRmrb

P.S. Your TitleContainerPaint gives slightly different shape than given in your example image, you'll probably need to tweak it. Maybe it's just the issue with Flutter for Web.

flutter - How to create an inner shadow for custom shape in Flutter?

3 回答 3

Related

Reference