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 32 · Answer 1 · answered Sep 05 '19 at 19:15

32

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

536
5
2

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
9

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

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

7

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

356
5
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 2 · 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 1 · 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 -1 · Answer 5 · 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

33,798
37
161
232

How to change Text color based on background Image - Flutter

5 Answers5