如何获得良好的抖动阴影效果？

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

这可能对您有帮助！

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Container(
              height:double.infinity,
                color: Colors.white,
                child: Row(
                  mainAxisAlignment:MainAxisAlignment.spaceAround,
                  children: [
                  Card(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(80),
                      ),
                    elevation:25,
                    color:Colors.blue,
                      child: Icon(Icons.pause, color: Colors.white, size: 150)),
                    Card(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(80),
                      ),
                    elevation:25,
                    color:Colors.white,
                      child: Icon(Icons.forward, color: Colors.black, size: 150))
                ])));
      }

Answer 2

请检查这些博客文章以制作具有阴影效果的UI组件。

https://codesource.io/how-to-create-a-neumorphic-design-with-flutter/

https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20

https://devsheet.com/code-snippet/add-box-shadow-to-container-in-flutter/

https://medium.com/flutter-community/flutter-shadows-glows-af4956ed04fc

一旦您尝试了上述博客文章方法，请告诉我。乐于助人，乐于编码。

Answer 3

您可以这样尝试Container BoxShadow

return Container(
        height: 80,
        width: 80,
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        decoration: BoxDecoration(shape: BoxShape.circle, boxShadow: [
          BoxShadow(
            color: DesignTinTinAppTheme.Bright_gray,
            blurRadius: 3.0,
          ),
        ]),
        alignment: FractionalOffset.centerLeft,
        child: new Align(
          alignment: Alignment.center,
          child: new Image(
            image: new AssetImage(
              "assets/images/gear.png",
            ),
            height: 30.0,
            width: 30.0,
            color: Colors.grey,
          ),
        ));

Answer 4

1. 将那个小部件包装在Container中，并为Container提供一些属性{spreadRadius，blurRadius}例如

   容器（孩子：your_widget，装饰：BoxDecoration（阴影：BoxShadow（颜色：Colors.grey，spreadRadius：5，blurRadius：2），），）;