如何为CustomClipper创建的窗口小部件制作合适的边框和阴影

Question

我有一个使用Container的ClipPath内的CustomClipper小部件。一切正常，我有所需的小部件形状。

但是，我找不到为这个自定义形状的Widget制作阴影的方法。此外，我想要一个自动跟随此自定义窗口小部件边缘的轮廓（边框）。

再没有运气。我试过BoxDecoration:border，BoxDecoration:boxShadow，ShapeDecoration:shape，ShapeDecoration:shadows，Material:Elevation等。

Answer 1

看看library的源代码。在此库中实现的功能似乎与您的任务非常相似。

您必须实现绘制阴影和边框的CustomPainter。

return AspectRatio(
        aspectRatio: 1.0,
        child: CustomPaint(
            painter: BoxShadowPainter(specs, boxShadows),
            child: ClipPath(
              clipper: Polygon(specs),
              child: child,
            )));

Answer 2

基于@Bohdan Uhrynovskiy我进一步调查并提出了这个解决方案：

CustomPaint(
  painter: BoxShadowPainter(),
  child: ClipPath(
  clipper: MyClipper(), //my CustomClipper
  child: Container(), // my widgets inside
)));


class BoxShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    // here are my custom shapes
    path.moveTo(size.width, size.height * 0.14);
    path.lineTo(size.width, size.height * 1.0);
    path.lineTo(size.width - (size.width  *0.99) , size.height);
    path.close();

    canvas.drawShadow(path, Colors.black45, 3.0, false);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

您必须在paint()的BoxShadowPainter方法中提供自己的自定义路径