Neumorphism 组件 ーー Dart extension 扩展

前语

创立 Neumorphism Flutter widget

为了完成 widget 的美观，增加阴影是必须的。要在 Widget 上创立阴影，一般的办法是将其包装在 container 中。咱们需求盒子装饰特点的盒子影子。供给 BoxDecoration 的 widget 之一是 Container widget 。所以基本上，在这个办法中，咱们将经过将 Widget 包装在一个 Container 中来向 Widget 增加 Neumorphism 功能。

dart.dev/guides/lang…

正文

代码

这是扩展办法:

extension Neumorphism on Widget {
  addNeumorphism({
    double borderRadius = 10.0,
    Offset offset = const Offset(5, 5),
    double blurRadius = 10,
    Color topShadowColor = Colors.white60,
    Color bottomShadowColor = const Color(0x26234395),
  }) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
        boxShadow: [
          BoxShadow(
            offset: offset,
            blurRadius: blurRadius,
            color: bottomShadowColor,
          ),
          BoxShadow(
            offset: Offset(-offset.dx, -offset.dx),
            blurRadius: blurRadius,
            color: topShadowColor,
          ),
        ],
      ),
      child: this,
    );
  }
}

properties:

• borderRadius: 创立圆形框的角。
• Offset: 创立偏移量。第一个参数设置水平分量 dx，第二个参数设置垂直分量 dy。
• blurRadius: 高斯标准差与阴影形状的卷积。使用于盒子阴影特点。
• topShadowColor: 出现在左上角的阴影色彩。
• ShadowColor: 出现在右下角的阴影色彩。

我仅仅使用左上角和右下角的阴影。您还可以自定义该办法，以便经过在列表中增加 BoxShadow 并为左下角设置 Offset (ー，+) ，为右上角设置 Offset (+ ，ー) ，向所有边增加阴影。

施行

”neumorphism 的关键在于挑选正确的调色板。为了到达新形态作用，你需求 3 种相同色彩的色度。”

现在，我将采用 3 个示例色彩并在上面的扩展办法中完成它们。

• 光影: 色彩(0xFFFFFFFF)
• 主要布景和元素色彩: 色彩(0xFFE0E5EC)
• 阴影: 色彩(0xFFA3B1C6)

咱们将设置脚手架的布景色彩与主布景色彩,

接下来为 widget 增加光影和阴影

因为咱们正在扩展 Widget，所以咱们可以在 Widget 的“封闭括号”之后增加一个新的类型化办法。并且不要忘掉，当 widget 和扩展办法在不同的文件中分隔时，必须导入。

阴影作为底部的 ShadowColor 和 topShadowColor 咱们使用光影，成果如下:

现在咱们有了一个美丽的共享按钮，带有纽曼风格。正如您在第一张图片中所看到的，我创立了一些按钮 widget ，它们具有类似于纽曼风格的款式。你可以经过下面的链接在 Dartpad 上试试

代码

dartpad.dev/?id=d80516d…

github.com/pmatatias/s…

演示成果

github.com/pmatatias/s…

参考

• uxplanet.org/neumorphism…
• github.com/abuanwar072…
• www.behance.net/gallery/927…

结束语

假如本文对你有帮助，请转发让更多的朋友阅览。

也许这个操作只要你 3 秒钟，对我来说是一个鼓励，感谢。

祝你有一个美好的一天~

猫哥

• 微信 ducafecat

• wiki.ducafecat.tech

• video.ducafecat.tech