Flutter中如何实现颜色反转 适配深浅主题下的自定义渐变容器

• Flutter 内置的Color类没有提供现成的反转方法，不需要引入第三方依赖，通过逐通道计算就能实现目标效果。
• 颜色反转的核心逻辑很简单：对R、G、B三个8位色彩通道，每个通道的值取255 - 通道原值，Alpha透明度通道保持原数值不动，最终生成的颜色和原颜色透明度一致，刚好是色轮对面的反转效果。

全局复用写法 #

• 用Dart的扩展方法给Color加个invertColor方法，写一次全局都能调用，实现代码如下：

extension ColorInvertExt on Color {
  Color invertColor() {
    return Color.fromARGB(
      alpha,
      255 - red,
      255 - green,
      255 - blue,
    );
  }
}

• 写完之后直接用Theme.of(context).scaffoldBackgroundColor.invertColor()即可，和你预想的调用语法完全一致。

GradientContainer 组件适配 #

• 原来的组件在深色模式下渐变看不清，本质原因是：浅色主题下Scaffold是高明度的浅色调，你拿半透明同色当渐变终止端，是能和背景拉出层次的；但切到深色模式后，Scaffold本身就是低明度的深色调，叠一层半透明的同色和背景完全贴在一起，直接丢失了对比度，自然看不清渐变效果。
• 调整时不需要改动组件的其他结构，只要把渐变的终止端颜色换成反转后的Scaffold背景色即可，改完的核心渐变部分：

LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  stops: [0.0, 1.0],
  colors: [
    Colors.black.withOpacity(0.0),
    Theme.of(context).scaffoldBackgroundColor.invertColor().withOpacity(0.8),
  ]
)

零散调用的临时实现 #

• 要是不想写全局扩展，也可以在用到的位置直接计算反转色，不需要提前定义扩展：

final bgColor = Theme.of(context).scaffoldBackgroundColor;
final invertedColor = Color.fromARGB(
  bgColor.alpha,
  255 - bgColor.red,
  255 - bgColor.green,
  255 - bgColor.blue,
);

• 这套计算逻辑对所有来源的颜色都生效，不管是主题取的色、自定义色值、带透明度的半透明色，计算结果都不会出错。

内容的提问来源于stack exchange，提问作者whatever