Flutter 中的新形态/新形态设计

Question

我最近看到了几篇关于 Flutter 新形态设计的文章。我如何在我自己的项目中实现它？

我知道这是关于 的decoration，但我具体要添加什么？

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    ???
  ),
),

Answer 1

您可以尝试使用实际颜色，但这里有一个明暗示例。如果您看到更喜欢的不同配色方案，那么只需截取屏幕截图并使用 Gimp 或其他一些图像编辑软件从中获取十六进制颜色。

异形光

• 背景颜色： Color(0xFFEFEEEE)
• 光影： Colors.white.withOpacity(0.8),
• 黑暗的影子： Colors.black.withOpacity(0.1)

代码

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.white.withOpacity(0.8),
        offset: Offset(-6.0, -6.0),
        blurRadius: 16.0,
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        offset: Offset(6.0, 6.0),
        blurRadius: 16.0,
      ),
    ],
    color: Color(0xFFEFEEEE),
    borderRadius: BorderRadius.circular(12.0),
  ),
),

变态暗

• 背景颜色： Color(0xFF292D32)
• 光影： Colors.white.withOpacity(0.1),
• 黑暗的影子： Colors.black.withOpacity(0.4)

代码

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.white.withOpacity(0.1),
        offset: Offset(-6.0, -6.0),
        blurRadius: 16.0,
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.4),
        offset: Offset(6.0, 6.0),
        blurRadius: 16.0,
      ),
    ],
    color: Color(0xFF292D32),
    borderRadius: BorderRadius.circular(12.0),
  ),
),

酒吧套餐

• flutter_neumorphic
• 粘土容器
• 新形态的
• nm_generators

也可以看看

这些文章和代码有助于研究这一点。

• 用户界面中的新同态
• 用户界面设计中的 Neumorphism（软 UI） - 教程
• 2020 年黑暗新拟态 UI 趋势
• Flutter 的新形态设计
• neuomorphic_container 发布包