Flutter 如何制作好飘影效果？

我想制作如下所示的良好阴影效果

在互联网上找到的所有例子都无法接近上述设计

经过长时间的尝试和错误，我可以做到以下几点。还是无法制造内心的阴影。如果有人能指导我如何解读这些设计，那就太好了

用于制作上述按钮的代码

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

Widget buildBackButton（）{
双倍尺寸=47；
返回堆栈(
儿童：[
容器(
宽度：大小，
高度：尺寸，
装饰：盒子装饰(
颜色：颜色，白色，
形状：BoxShape.circle，
boxShadow：[
箱形阴影(
颜色：颜色。黑色，
偏移量：偏移量（20,20），
半径：40，
),
箱形阴影(
颜色：颜色，白色，
偏移量：偏移量（-20，-20），
半径：25，
)
]),
儿童：材料(
颜色：颜色（0xffe0eafb），
边界半径：边界半径。圆形（大小），
标高：10，
孩子：填充(
填充：常数边集全部（3.0），
孩子：斜坡(
clipper:MClipper（），
),
),
),
),
容器(
宽度：45.0，
身高：45.0，
填充：仅限边设置（左：2，顶：2），
子项：新的RawMaterialButton(
形状：新的CircleBorder（），
填充颜色：颜色（0xffe0eafb），
标高：10.0，
子：图标(
Icons.arrow_back，
颜色：颜色，黑色，
),
按下：（）{}，
)),
],
);
}
类MClipper扩展了CustomClipper{
@凌驾
Rect getClip（大小）{
返回Rect.fromCircle(
中心：偏移（尺寸.宽度/2，尺寸.高度/2），
半径：最小值（尺寸、宽度、尺寸、高度）/2；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回true；
}
}

---

提前谢谢。

这可能会对您有所帮助

      @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))
                ])));
      }

---

你可以试试这样的容器盒阴影

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

将该小部件包装到容器中，并向容器提供一些属性{spreadRadius，blurRadius} e、 g

容器（
孩子：你的小部件，
装饰：盒子装饰（
影子：[
盒影（
颜色：颜色。灰色，
扩展半径：5，
模糊半径：2
)]  
),  
);

跟随

快乐编码：）

代码如下：

小部件构建（构建上下文）{
退货(
标高：2，
类型：MaterialType.button，
颜色：颜色。透明，
边界半径：边界半径。圆形（1000），
子：容器(
装饰：盒子装饰(
边框：边框。全部（颜色：颜色（0xff6C96F9），宽度：2.0），
边界半径：边界半径。圆形（1000），
梯度：径向梯度(
中心：对齐（0.55,0.55），
焦点半径：64，
颜色：[
颜色（0xff789DF9），
颜色（0xff477FF8），
],
),
),
儿童：手势检测器(
onTap:（）{}，
孩子：填充(
填充：常数边集全部（24.0），
子：图标(
暂停，
颜色：颜色，白色，
),
),
),
),
);
}

您无法获得准确的设计，因为您没有为背景和按钮背景+按钮边框使用正确的颜色代码。首先找到正确的颜色阴影使用。我同意。我在谷歌上搜索了更多关于阴影的内容，我想我做错的是使用了错误的外部和内部颜色组合。在那里，他们在那里，同样的，只是我们人类的眼睛欺骗了我。。。我希望你现在已经实现了你所追求的目标。这只是关于颜色，看，使内部阴影，我认为有差异的参数，但在看更多的只是正确的颜色组合，从黑暗到较亮的颜色棚。