Suppose I have a Color object in Flutter that I want to change its Hue or Saturation or Lightness or Brightness, how do I do that?
Thanks
You can use these helper methods to change it. Just replace
newHueValue
: with any double btw 0 and 360newSaturationValue
: with any double btw 0 and 1newLightnessValue
: with any double btw 0 and 1Color changeColorHue(Color color) => HSLColor.fromColor(color).withHue(newHueValue).toColor();
Color changeColorSaturation(Color color) => HSLColor.fromColor(color).withSaturation(newSaturationValue).toColor();
Color changeColorLightness(Color color) => HSLColor.fromColor(color).withLightness(newLightnessValue).toColor();
Similarly you can use: HSVColor
for HSV (hue, saturation, value).
more: https://api.flutter.dev/flutter/painting/HSLColor-class.html
there are several ways of doing this
1.Most swatches have colors from 100 to 900 in increments of one hundred, plus the color 50. The smaller the number, the more pale the color. The greater the number, the darker the color. The accent swatches (e.g. redAccent
) only have the values 100,
200,
400
, and 700
.
example Color selection = Colors.green[400]; // Selects a mid-range green.
In addition, a series of blacks and whites with common opacities are available. For example, black54 is a pure black with 54% opacity.
other methods of color are
computeLuminance()
→ double
Returns a brightness value between 0 for darkest and 1 for lightest.
toString() →
String
Returns a string representation of this object.
withAlpha(int a)
→ Color
Returns a new color that matches this color with the alpha channel replaced with a (which ranges from 0 to 255).
withBlue(int b) →
Color
Returns a new color that matches this color with the blue channel replaced with b (which ranges from 0 to 255).
withGreen(int g)
→ Color
Returns a new color that matches this color with the green channel replaced with g (which ranges from 0 to 255).
withOpacity(double opacity) →
Color
Returns a new color that matches this color with the alpha channel replaced with the given opacity (which ranges from 0.0 to 1.0).
withRed(int r)
→ Color
Returns a new color that matches this color with the red channel replaced with r (which ranges from 0 to 255).
In addition to @Tomas Barans answer:
Here are some relative helper methods to modify the saturation, hue and brightness without the need to set an absolute value:
Color increaseColorSaturation(Color color, double increment) {
var hslColor = HSLColor.fromColor(color);
var newValue = min(max(hslColor.saturation + increment, 0.0), 1.0);
return hslColor.withSaturation(newValue).toColor();
}
Color increaseColorLightness(Color color, double increment) {
var hslColor = HSLColor.fromColor(color);
var newValue = min(max(hslColor.lightness + increment, 0.0), 1.0);
return hslColor.withLightness(newValue).toColor();
}
Color increaseColorHue(Color color, double increment) {
var hslColor = HSLColor.fromColor(color);
var newValue = min(max(hslColor.lightness + increment, 0.0), 360.0);
return hslColor.withHue(newValue).toColor();
}
An extension method can also be used:
import 'package:flutter/foundation.dart';
import 'package:flutter/painting.dart';
extension ColorWithHSL on Color {
HSLColor get hsl => HSLColor.fromColor(this);
Color withSaturation(double saturation) {
return hsl.withSaturation(clampDouble(saturation, 0.0, 1.0)).toColor();
}
Color withLightness(double lightness) {
return hsl.withLightness(clampDouble(lightness, 0.0, 1.0)).toColor();
}
Color withHue(double hue) {
return hsl.withHue(clampDouble(hue, 0.0, 360.0)).toColor();
}
}
HSVColor
class