Flutter的深色模式颜色

Question

在网站material.io中写道：

  

要创建品牌深色表面，请在建议的深色主题表面颜色（＃121212）上以较低的不透明度覆盖。颜色＃1F1B24是组合深色主题表面颜色＃121212和 8％原色的结果。

我的问题是：

1. 如何计算8％的颜色？
2. 如何在 Flutter 中实现此叠加功能？

Answer 1

不使用窗口小部件的叠加层解决方案是使用Color.alphaBlend

将前景色组合为顶部上方的透明色 背景颜色，然后返回合成的颜色。

您可以这样使用它：

Color newColor = Color.alphaBlend(foregroundColor, backgroundColor);

Answer 2

颜色的

1.8％是颜色，但不透明度为8％。这可以通过使用Opacity widget或通过使用withOpacity method of the Colors class来实现。

2。

  

覆盖图是元素上的半透明覆盖物，指示状态。叠加层提供了一种使用不透明性可视化状态的系统方法。

要使用Flutter叠加，请使用Overlay Widget。

example in flutter-using-overlay-to-display-floating-widgets

Answer 3

1. Color.fromRGBO(r, g, b, opacity)指定不透明度。在您的情况下，从0.0（完全透明）到1.0（完全不透明），您可能具有0.08的不透明度来模拟8％的不透明度， 因此您的代码为Color.fromRGBO(31, 26, 36, 0.08)

2. 可以使用Stack()小部件来实现覆盖，该小部件是位置小部件，其工作原理与Colum或Row非常相似，但是Stack将每个小部件放在另一个小部件之上