flutter - 如何制作好的 flutter 阴影效果？

Question

我想做出如下图好的阴影效果，

网上找的例子都比不上上面的设计。

经过长时间的尝试和错误，我可以做出以下。仍然无法制作内影。如果有人能指导我如何破译这个设计，那就太好了。

用于制作上述按钮的代码，

Widget buildBackButton() {
    double size = 47;
    return Stack(
      children: <Widget>[
        Container(
          width: size,
          height: size,
          decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  offset: Offset(20, 20),
                  blurRadius: 40,
                ),
                BoxShadow(
                  color: Colors.white,
                  offset: Offset(-20, -20),
                  blurRadius: 25,
                )
              ]),
          child: Material(
            color: Color(0xffe0eafb),
            borderRadius: BorderRadius.circular(size),
            elevation: 10,
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: ClipOval(
                clipper: MClipper(),
              ),
            ),
          ),
        ),
        Container(
            width: 45.0,
            height: 45.0,
            padding: EdgeInsets.only(left: 2, top: 2),
            child: new RawMaterialButton(
              shape: new CircleBorder(),
              fillColor: Color(0xffe0eafb),
              elevation: 10.0,
              child: Icon(
                Icons.arrow_back,
                color: Colors.black,
              ),
              onPressed: () {},
            )),
      ],
    );
  }

class MClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(
        center: Offset(size.width / 2, size.height / 2),
        radius: min(size.width, size.height) / 2);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}

提前致谢。

Answer 1

代码如下:

  Widget build(BuildContext context) {
    return Material(
      elevation: 2,
      type: MaterialType.button,
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(1000),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Color(0xff6C96F9), width: 2.0),
          borderRadius: BorderRadius.circular(1000),
          gradient: RadialGradient(
            center: Alignment(0.55, 0.55),
            focalRadius: 64,
            colors: [
              Color(0xff789DF9),
              Color(0xff477FF8),
            ],
          ),
        ),
        child: GestureDetector(
          onTap: () {},
          child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: Icon(
              Icons.pause,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }