ColorFiltered Overflows Image

Question

So I am currently trying to change the color of an image with ColorFilter.mode(Colors.green, BlendMode.hue).

But the filter affects the image behind too and the Container. What I would like to have would be a mix of BlendMode.srcIn and BlendMode.hue.

I need the Image edited not a make the Container white solution :/

Help would be appreciated :/

Container(
  color: Colors.white,
  child: ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.green, BlendMode.hue),
    child: Image.asset('assets/eyes/$eyes.png'),
  ),
),

I would like to have the Image 1 turned into the Eyes of 2 without the green background. (The eyes of Image 1 have a transparent background)

1	2	3

Answer 1

Apply a ColorFilter to an Image without affecting the background Container. To achieve this effect, you can wrap your Image.asset widget with a ClipRect widget. The ClipRect will constrain the effect of the ColorFilter to only affect its child, which is the Image.

Container(
  color: Colors.white,
  child: ClipRect(
    child: ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.green, BlendMode.hue),
      child: Image.asset('assets/eyes/$eyes.png'),
    ),
  ),
),