带有插入阴影和渐变的圆圈

Question

我想知道如何实现下面的效果。带有插图的圆形，也有渐变。

我设法得到了一个插入的阴影，但颜色均匀。我认为我需要在插图上设置渐变。

Container(
    height: 300,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      boxShadow: [
        BoxShadow(
          color: Color(0xffa3b1c6), // darker color
        ),
        BoxShadow(
          color: Color(0xffe0e5ec), // background color
          spreadRadius: -12.0,
          blurRadius: 12.0,
        ),
      ],
    ),
  ),

给出以下内容：

Answer 1

这样的设计称为 Neumorphic 设计。

Neumorphism 的中心点是阴影，它赋予界面一种用球形钻头仔细雕刻的表面的感觉。

return Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(bevel),
      color: Colors.grey.shade200,
      boxShadow: [
        BoxShadow(
          blurRadius: bevel,
          offset: -blurOffset,
          color: Colors.white,
        ),
        BoxShadow(
          blurRadius: bevel,
          offset: blurOffset,
          color: Colors.grey.shade400
        )
      ]),
  child: child,
);

上面的代码为光创建了一个白色斜角，为阴影创建了一个暗斜角。

但这篇中等文章展示了如何做得更好。

我还使用了一个漂亮的库，称为Neumorphic 容器库，它可以帮助我处理这个问题。

编辑：@nilsi 分享了一个更好的库，使 flutter 中的 Neumorphic 设计变得简单：flutter_neumorphic