It's clear how to draw a shadow with an elevation property but what if I want to have the shadow centered for example?
BoxShadow is a built-in widget in flutter, whose functionality is to cast shadow to a box. The BoxShadow widget is usually used with BoxDecoration. In BoxDecoration widget one of its parameters is boxShadow which takes a list of BoxShadow to cast a shadow around a box.
new Container( decoration: BoxDecoration( color: Colors. grey. withOpacity(0.5), boxShadow: [ BoxShadow( blurRadius: 5.0 ), ], ), ), This code works but adds a shadow to every possible side of the container.
Found a solution:
I can simply go into the source code for the BoxShadow widget and apply the path properties they used to my own paths.
Here's the source code.
Here's the code that I used to create a shadow for a custom path (rather than a circle or rectangle with a border radius) that allowed me to create a custom shadow rather than using the elevation preset.
canvas.drawPath(
Path()
..addRect(
Rect.fromPoints(Offset(-15, -15), Offset(size.width+15, size.height+15)))
..addOval(
Rect.fromPoints(Offset(0, 0), Offset(size.width, size.height)))
..fillType = PathFillType.evenOdd,
Paint()
..color= Colors.black.withAlpha(shadowAlpha)
..maskFilter = MaskFilter.blur(BlurStyle.normal, convertRadiusToSigma(3))
);
static double convertRadiusToSigma(double radius) {
return radius * 0.57735 + 0.5;
}
To draw shadow on CustomPaint
you can use painter.
CustomPaint(
painter: BoxShadowPainter(),
child: ClipPath(
clipper: MyClipper(), //my CustomClipper
child: Container(), // my widgets inside
)));
check my answer here
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