如何在颤动中为 ClipOval 添加阴影？

Question

作为初学者，我一直在尝试制作一个新应用。所以，给事物添加阴影对我来说是全新的。

所以，下面是我的代码：

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

            ],
          ),
        ),

以下是模拟：

Answer 1

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

输出：

Answer 2

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

结果将是