@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
),
),
);
}
Output (backgroundColor: Colors.orange, Text is visible):
Output (backgroundColor: Colors.black, Text isn't visible):
you can use computeLuminance() of Color class. Something like this:
@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)),
),
),
);
}
Of course you need to play around with the luminance IF-statement ... 1.0 is white and 0.0 is black. Yellow for instance is something about 0.8.