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

Question

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

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

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

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，在这里我想确定弹性空间展开时的标题和图标颜色。我在社区的帮助下根据this改变了折叠时的颜色。

Answer 1

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

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

Answer 2

我使用以下方法来找出要使用哪一种（黑色或白色）。

Color getTextColor(Color color) {
int d = 0;

// Counting the perceptive luminance - human eye favors green color...
double luminance =
    (0.299 * color.red + 0.587 * color.green + 0.114 * color.blue) / 255;

if (luminance > 0.5)
  d = 0; // bright colors - black font
else
  d = 255; // dark colors - white font

return Color.fromARGB(color.alpha, d, d, d);   }

Answer 3

有两种方法可以根据卡片或按钮或标签的背景颜色获取文本颜色。

第一个是：

Color txColor = color.computeLuminance() < 0.5 ? Colors.white : Colors.black;

第二个是使用主题，用户可能有设备的深色主题或浅色主题。

import 'dart:math';
import 'package:flutter/material.dart';

class ColorEstimationPage extends StatelessWidget {
  Color _randomBackgroundColor() {
    List<Color> colors = [Colors.red, Colors.green, Colors.amber, Colors.black];

    return colors[Random().nextInt(colors.length)];
  }
   /// With this you can get the Color either black or white
  Color _textColorForBackground(Color backgroundColor) {
    if (ThemeData.estimateBrightnessForColor(backgroundColor) ==
        Brightness.dark) {
      return Colors.white;
    }

    return Colors.black;
  }

  @override
  Widget build(BuildContext context) {
    Color bgColor = _randomBackgroundColor();
    return Scaffold(
      backgroundColor: bgColor,
      body: Center(
        child: Text(
          "I'm the correct text color!",
          style: TextStyle(color: _textColorForBackground(bgColor)),
        ),
      ),
    );
  }
}

Answer 4

您应该像这样创建调色板生成器

PaletteGenerator paletteGenerator =
  await PaletteGenerator.fromImageProvider(
NetworkImage(imageUrl),

filters: [],
// 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),
); 

注意过滤器参数中的空列表

Answer 5

缤纷色彩

如果您的字体/背景颜色不仅仅是黑色和白色，您应该使用其他颜色：

 final colorDifference = newBackgroundColor.computeLuminance() -
        textColor.computeLuminance();
    if (colorDifference.abs() < 0.2) {
      textColor = textColor.computeLuminance() > 0.5
          ? Colors.black
          : Colors.white;
    }

有了这个，您只会在必要时更改字体颜色（亮度差异很小，以至于颜色不会真正突出）。

Answer 6

不完全是你想要的，但我注意到 CircleAvatar 使用背景颜色来实现这一点，所以我检查了该小部件的代码，它提出了 ThemeData.estimateBrightnessForColor()。 由于computeLuminance不太适合我，我实现了以下内容：

 _lightOrDarkColor(bgColor) {
switch (ThemeData.estimateBrightnessForColor(bgColor!)) {
  case Brightness.dark:
    return Colors.white;
  case Brightness.light:
    return Colors.black;
}

}

也许它对某人有帮助。

Answer 7

对于您可以使用的按钮。这将根据背景自动更改按钮颜色

buttonTheme: ButtonThemeData(
   buttonColor: Colors.teal[500],
   textTheme: ButtonTextTheme.primary
)