带有内嵌阴影和渐变的圆形

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

给出以下内容：

- nilsi

---

https://gist.github.com/pskink/da43c327b75eec05d903fa1b4d0c4d3e#file-decorations-dart-L97 - pskink

你能分享一下对你有效的解决方案吗？ - Lidor Eliyahu Shelef

Answer 1

这样的设计被称为新拟态设计。

新拟态设计的核心是阴影，它们赋予界面一种像表面被球形钻子小心雕刻过的感觉。

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 container library，它可以帮助我处理它。

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

- Wilson Wilson

---

那帮助我解决了问题。我使用了这个库代替：https://pub.dev/packages/flutter_neumorphic - nilsi