Neumorphism 组件 ーー Dart extension 扩展

Neumorphism 组件 ーー Dart extension 扩展

前语

创立 Neumorphism Flutter widget

Neumorphism 组件 ーー Dart extension 扩展

为了完成 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)

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

Neumorphism 组件 ーー Dart extension 扩展

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

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

Neumorphism 组件 ーー Dart extension 扩展

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

Neumorphism 组件 ーー Dart extension 扩展

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

代码

dartpad.dev/?id=d80516d…

github.com/pmatatias/s…

演示成果

Neumorphism 组件 ーー Dart extension 扩展

github.com/pmatatias/s…

参考

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

结束语

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

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

祝你有一个美好的一天~

猫哥

  • 微信 ducafecat

  • wiki.ducafecat.tech

  • video.ducafecat.tech