How to change Text color based on background Image - Flutter

Question

I want to change text (and Icon) colors based on the background image for visibility.

I've tried: Using palette_generator package, to check the Dominant Color of the background Image and useWhiteForgroundForColor function (returns a bool) from flutter_statusbarcolor package to select black or white color for the my text (and Icon) colors.

The Problem: Sometimes dominant color turns out null. In my tests, this happens with black and white colors and I don't know of any ways to find out which one.

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);
}

I found other methods for other languages, but I don't know a way to implement the same method in dart.

Additional note: My actual code includes some additional complications. I am using a SliverAppBar and here I want to determine the title and icons colors for when the flexibleSpace is expanded. I change their colors when collapsed with the help of the community based on this.

score 47 · Answer 1 · answered Sep 05 '19 at 19:15

47

the color class already has a method to calculate luminance, called computeLuminance()

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

answered Sep 05 '19 at 19:15

Leo

696
6
3

as mentioned above, sometimes the color returns null. so I can't use this method on it – Sina Seirafi Sep 11 '19 at 12:06
11

Warning: As per the computeLuminance(...) docs `This value is computationally expensive to calculate.` – zackygaurav Apr 22 '21 at 10:28

score 9 · Answer 2 · answered May 29 '19 at 12:26

9

i use the below method to find out which one to be used (either black or white).

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);   }

answered May 29 '19 at 12:26

Star Lut

416
6
11

my problem is mostly for getting the color of the background image. if it returns null, I can't use this method for it – Sina Seirafi Sep 11 '19 at 12:07
This doesn't seem computationally expensive like computeLuminance() – aolsan Feb 19 '22 at 17:28

score 4 · Answer 3 · answered Jun 21 '21 at 09:44

There are Two ways of getting Text Color based upon the BG Color of Card or Button or Tags.

First One is :

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

The Second is using Theme , Where user may have dark theme or light theme of device.

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)),
        ),
      ),
    );
  }
}

score 2 · Answer 4 · answered Oct 21 '19 at 19:59

You should create the palette generator like this

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),
);

notice the empty list in the filters parameter

score 2 · Answer 5 · edited Mar 29 '23 at 06:22

Colorful colors

If you have font/background colors that aren't only black and white, you should use some thing else:

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

With this, you will only change the font color if necessary (the luminance difference is so less that the colors don't really stand out).

score -1 · Answer 6 · answered Jan 22 '21 at 13:06

-1

For buttons you can use. this will auto change button color based on background

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

answered Jan 22 '21 at 13:06

aWebDeveloper

36,687
39
170
242

How to change Text color based on background Image - Flutter

6 Answers6