Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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..

like image 589
aytunch Avatar asked Jan 02 '23 06:01

aytunch


1 Answers

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

like image 65
user969068 Avatar answered Apr 09 '23 13:04

user969068