时间戳

首页 > 解决方案 > 如何根据背景图像更改文本颜色 - Flutter

dart - 如何根据背景图像更改文本颜色 - Flutter

问题描述

我想根据背景图像更改文本（和图标）颜色以提高可见性。

我尝试过： 使用palette_generator包检查背景图像的主色，并使用flutter_statusbarcolor包中的WhiteForgroundForColor 函数（返回布尔值）来为我的文本（和图标）颜色选择黑色或白色。

问题：有时主色变为空。在我的测试中，这发生在黑色和白色上，我不知道有什么方法可以找出哪一种。

Future<bool> useWhiteTextColor(String imageUrl) async {
  PaletteGenerator paletteGenerator =
      await PaletteGenerator.fromImageProvider(
    NetworkImage(imageUrl),

    // Images are square
    size: Size(300, 300),

    // I want the dominant color of the top left section of the image
    region: Offset.zero & Size(40, 40),
  );

  Color dominantColor = paletteGenerator.dominantColor?.color;

  // Here's the problem 
  // Sometimes dominantColor returns null
  // With black and white background colors in my tests
  if (dominantColor == null) print('Dominant Color null');

  return useWhiteForeground(dominantColor);
}

我找到了其他语言的其他方法，但我不知道在 dart 中实现相同方法的方法。

附加说明：我的实际代码包括一些额外的复杂性。我正在使用 SliverAppBar，在这里我想确定flexibleSpace 展开时的标题和图标颜色。基于此，我在社区的帮助下崩溃时更改了它们的颜色。

标签： dartfluttertextcolor

解决方案

颜色类已经有一个计算亮度的方法，称为computeLuminance()

Color textColor = color.computeLuminance() > 0.5 ? Colors.black : Colors.white;

推荐阅读