为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,
输出:
,
您可以创建自己的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;
}
}
然后使用它
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: () {},
结果将是
本文链接:https://www.f2er.com/3167855.html