带有阴影和渐变的圆圈

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

这样的设计叫做神经形态设计。

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

以上代码为光创建了一个白色斜面，为阴影创建了一个深色斜面。

但是 this medium article 展示了如何做得更好。

还有一个我使用的名为 neumorphic container library 的漂亮库，它可以帮助我处理这个问题。

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

带有阴影和渐变的圆圈

Circle with inset shadow and gradient

shadow

dart

flutter