Neumorphism 组件 ーー Dart extension 扩展
Neumorphism 组件 ーー Dart extension 扩展
前言
创建 Neumorphism Flutter widget
为了实现 widget 的美观，添加阴影是必须的。要在 Widget 上创建阴影，通常的方法是将其包装在 container 中。我们需要盒子装饰属性的盒子影子。提供 BoxDecoration 的 widget 之一是 Container widget 。所以基本上，在这个方法中，我们将通过将 Widget 包装在一个 Container 中来向 Widget 添加 Neumorphism 功能。
正文
代码
这是扩展方法:
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 上试试
代码
演示结果
参考
结束语
如果本文对你有帮助，请转发让更多的朋友阅读。
也许这个操作只要你 3 秒钟，对我来说是一个激励，感谢。
祝你有一个美好的一天~
© 猫哥
-
微信 ducafecat