How to add shadow to ClipOval in flutter?
You can create your own CustomClipper
class CustomClipperOval extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
return Rect.fromCircle(
center: new Offset(size.width / 2, size.width / 2),
radius: size.width / 2 + 3);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) {
return false;
}
}
class ClipOvalShadow extends StatelessWidget {
final Shadow shadow;
final CustomClipper<Rect> clipper;
final Widget child;
ClipOvalShadow({
@required this.shadow,
@required this.clipper,
@required this.child,
});
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: _ClipOvalShadowPainter(
clipper: this.clipper,
shadow: this.shadow,
),
child: ClipRect(child: child, clipper: this.clipper),
);
}
}
class _ClipOvalShadowPainter extends CustomPainter {
final Shadow shadow;
final CustomClipper<Rect> clipper;
_ClipOvalShadowPainter({@required this.shadow, @required this.clipper});
@override
void paint(Canvas canvas, Size size) {
var paint = shadow.toPaint();
var clipRect = clipper.getClip(size).shift(Offset(0, 0));
canvas.drawOval(clipRect, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
And then to use it
ClipOvalShadow(
shadow: Shadow(
color: Colors.amber,
offset: Offset(1.0, 1.0),
blurRadius: 2,
),
clipper: CustomClipperOval(),
child: ClipOval(
child: Material(
color: Colors.white, // button color
child: InkWell(
// splashColor: Colors.red, // inkwell color
child: Container(
width: 46,
height: 46,
child: Icon(
Icons.menu,
color: Colors.black,
),
),
onTap: () {},
),
),
),
),
The Result will be
Adding shadow to ClipOval:
Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.green,
blurRadius: 50.0,
spreadRadius: 10.0,
)
],
),
child: ClipOval(
child: Image.network(
'https://i.picsum.photos/id/384/536/354.jpg?hmac=MCKw0mm4RrI3IrF4QicN8divENQ0QthnQp9PVjCGblo',
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
),
),
Output: