如何在Flutter中为自定义形状创建内部阴影?

问题描述

下面是我想要给内部阴影的自定义形状:

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?

先谢谢您.

推荐答案

我提出了与我的其他答案相同的方法.在您的情况下，您只需将 CustomPaint 小部件用作内部阴影小部件的子级即可:

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()),
)

完整代码可在此处找到 https://codepen.io/priezz/pen/abBRmrb

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

P.S.您的 TitleContainerPaint 形状与示例图片中给出的形状略有不同，您可能需要对其进行调整.也许这只是Flutter for Web的问题.

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中为自定义形状创建内部阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！