How to make suitable border and shadow for a widget created by CustomClipper

问题

I have a Container widget inside of a ClipPath which uses a CustomClipper. Everything works fine, I have the desired widget shape.

However, I could not find a way to make a shadow for this custom shaped Widget. Also, I want to have an outline(border) that follows the edges of this custom widget automatically.

Again no luck. I tried BoxDecoration:border, BoxDecoration:boxShadow, ShapeDecoration:shape, ShapeDecoration:shadows, Material:Elevation, etc..

回答1:

Look at source code of the library. Feature implemented in this library seems very similar to your task.

You have to implement CustomPainter that draws shadows and borders.

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

回答2:

based on @Bohdan Uhrynovskiy I investigated further and came up with this solution:

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;
  }
}

You must need to provide your own custom paths in paint() method of BoxShadowPainter

来源：https://stackoverflow.com/questions/54753355/how-to-make-suitable-border-and-shadow-for-a-widget-created-by-customclipper

标签

dart

Flutter

clip-path