如何根据背景更改文本颜色，以便两种颜色之间有良好的对比度

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。

Answer 2

您可以使用包https://pub.dev/packages/palette_generator

该函数将返回背景颜色 此功能是专门为图像而设计的，但您也可以将其用于小部件。

代码：

  getTextColor(String imageLink) async {

final ImageProvider imageProvider = NetworkImage(imageLink);

final PaletteGenerator paletteGenerator = await PaletteGenerator.fromImageProvider(imageProvider);

final Color dominantColor = paletteGenerator.dominantColor?.color ?? Colors.black;

// Calculate the luminance of the dominant color
double luminance = dominantColor.computeLuminance();

// Set text color based on luminance

return luminance > 0.5 ? Colors.black : Colors.white;

}