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.

@pskink Could you please provide a code showing how to do it properly. I tried mask filer.blur before, BlurStyle.normal provided the shadow I wanted but it was both outer and inner, I can overlap it with a clip path to hide the outer shadow but I don't think its a good option, I also tried inner and outer BlurStyle but its provided some wierd results. — Sarvesh Dalvi, Mar 07 '21 at 09:10
@TipuSultan Height is 60 (constant value) and width is 70% of screen width (scaled using MediaQuery) — Sarvesh Dalvi, Mar 07 '21 at 09:43
`var r = (Offset.zero & size); canvas.clipRect(r); var r1 = r.deflate(32); var p = Path() ..fillType = PathFillType.evenOdd ..addRect(r) ..addRRect(RRect.fromRectAndRadius(r1, Radius.circular(64))); canvas.drawPath(p, Paint()..maskFilter = MaskFilter.blur(BlurStyle.outer, 8)` — pskink, Mar 07 '21 at 11:05

Tipu Sultan · Answer 1 · 2021-03-07T10:50:11.060

2

Use your paint like this:

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

Output:

edited Mar 07 '21 at 10:50

answered Mar 07 '21 at 10:12

Tipu Sultan

1,743
11
20

score 1 · Answer 2 · answered Mar 08 '21 at 11:49

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.

it doesnt work well with circle container (BoxShape.circle) – ILii Aug 02 '22 at 17:42 — ILii, Aug 02 '22 at 17:42

score 0 · Answer 3 · answered Mar 07 '21 at 10:25

0

//change the alpha color of your grey color like this

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

Here the shadow will be inner.

answered Mar 07 '21 at 10:25

Gourango Sutradhar

1,461
10
16

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

3 Answers3

Linked