如何制作好的颤动阴影效果？

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

你可以像那样尝试 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 3

将该小部件包装在 Container 中，并向 Container 提供一些属性 {spreadRadius,blurRadius} 例如

Container(  
    child: your_widget,  
    decoration : BoxDecoration(  
        shadow : [
            BoxShadow(  
            color : Colors.grey,   
            spreadRadius : 5,  
            blurRadius : 2  
        )]  
    ),  
);

关注link

快乐编码:)

Answer 4

代码如下：

  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,
            ),
          ),
        ),
      ),
    );
  }

如何制作好的颤动阴影效果？

How to make good flutter shadow effect?

dart

flutter

flutter-animation