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..
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With