flutterdartimage-processingcolormatrix

How to adjust Hue Saturation and Brightness of an image or widget in Flutter?


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?


Solution

  • 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:

    brightness

    saturation

    hue


    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.