In my Flutter app, I have an image and three sliders, one for Hue, one for Saturation, and one for Brightness, and I'm trying to figure out how to use the ColorFiltered
widget to make these adjustments, but I can't figure out what to put in for the ColorFilter.matrix
.
My code looks something like this:
ColorFiltered(
colorFilter: ColorFilter.matrix(
// What goes here?
),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(myImageUrl),
)
)
)
)
Does anyone know how to generate a color filter matrix based on HSV values?
I've added BananaNeil's answer into the Themed package.
Use the provided ChangeColors
widget to change the brightness, saturation and hue of any widget, including images, like this:
ChangeColors(
hue: 0.55,
brightness: 0.2,
saturation: 0.1,
child: Image.asset('myImage.png'),
);
Parameters are:
-1
is darkest).1
is the maximum, but you can go above it).0.0
is unchanged.-1
is greyscale).1
is the maximum, but you can go above it).0.0
is unchanged.-1.0
to 1.0
(Note: 1.0
wraps into -1.0
, such as 1.2
is the same as -0.8
).0.0
is unchanged. Adding or subtracting multiples of 2.0
also keeps it unchanged.Please note: The difference from the ChangeColors
widget to BananaNeil's answer is that the widget is a proper StatelessWidget
, code is null-safe, it fixes the limits of saturation so that you don't get weird effects, and the documentation was added explaining the parameters. If you don't want to add a package, just copy the code from GitHub.