如何在颤动中为 ClipOval 添加阴影? [英] How to add shadow to ClipOval in flutter?

问题描述

I have been trying to make a new app being a beginner. So, adding shadows to things is completely new to me.

So, Following is my code:

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: () {},
                  ),
                ),
              ),

            ],
          ),
        ),

Following is the mock:

解决方案

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

这篇关于如何在颤动中为 ClipOval 添加阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！