如何根据背景更改文本颜色，以使两种颜色之间形成良好的对比

Question

@override
Widget build(BuildContext context) {
  var backgroundColor = Colors.orange; // this color could be anything

  return Scaffold(
    body: Center(
      child: Container(
        padding: const EdgeInsets.all(12),
        color: backgroundColor,
        child: Text("Hello World"), // if backgroundColor: Colors.orange this is visible but if backgroundColor: Colors.black, it isn't visible
      ),
    ),
  );
}

输出（背景颜色：Colors.orange，文本可见）：

输出（背景颜色：Colors.black，文本不可见）：

Answer 1

您可以使用 Color 类的 computeLuminance()。像这样的：

@override
Widget build(BuildContext context) {
  var backgroundColor = Colors.orange; // this color could be anything
  var foregroundColor = backgroundColor.computeLuminance() > 0.5 ? Colors.black : Colors.white; 

  return Scaffold(
    body: Center(
      child: Container(
        padding: const EdgeInsets.all(12),
        color: backgroundColor,
        child: Text("Hello World", style: TextStyle(color: foregroundColor)), 
      ),
    ),
  );
}

当然，您需要使用亮度 IF 语句... 1.0 是白色，0.0 是黑色。例如，黄色约为 0.8。