Flutter 的深色模式颜色答案

【问题标题】：Dark mode colors for FlutterFlutter 的深色模式颜色
【发布时间】：2019-12-21 04:30:33
【问题描述】：

在网站material.io 中写道：

要创建品牌深色表面，请在推荐的深色主题表面颜色 (#121212) 上以低不透明度覆盖主要品牌颜色。颜色#1F1B24 是深色主题表面颜色#121212 和8% 原色组合的结果。

我的问题是：

【问题讨论】：

【解决方案1】：

不使用小部件的覆盖解决方案是使用Color.alphaBlend

组合[s]前景色作为透明色覆盖在背景颜色，并返回[s]生成的组合颜色。

你可以这样使用它：

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

【讨论】：

【解决方案2】：

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

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

要在 Flutter 中提供 Overlay，请使用 Overlay Widget。

【讨论】：

【解决方案3】：

Color.fromRGBO(r, g, b, opacity) 指定不透明度。在您的情况下，从 0.0（完全透明）到 1.0（完全不透明），您的不透明度可能为 0.08 以模拟 8% 的不透明度，所以你的代码是Color.fromRGBO(31, 26, 36, 0.08)
可以使用 Stack() 小部件实现覆盖，这是一个位置小部件，其工作方式与 Colum 或 Row 非常相似，但 Stack 将每个小部件放在另一个小部件的顶部

【讨论】：