如何在Flutter中向ClipOval添加阴影?

我一直在努力使新应用成为初学者。因此,在事物上添加阴影对我来说是全新的。

所以,以下是我的代码:

Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
              Clipoval(
                child: Material(
                  color: Colors.white,// button color
                  child: InkWell(
                    // splashColor: Colors.red,// inkwell color
                    child: SizedBox(
                        width: 46,height: 46,child: Icon(Icons.menu,color: Colors.red,),onTap: () {},],

以下是模拟:

如何在Flutter中向ClipOval添加阴影?

jun8888888 回答:如何在Flutter中向ClipOval添加阴影?

为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,

输出:

enter image description here

,

您可以创建自己的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: () {},

结果将是

enter image description here

本文链接:https://www.f2er.com/3167855.html

大家都在问