flutterdart

How to apply a color filter on a png with transparency on flutter?


I'm trying to paint a .png that has a transparent background:

enter image description here

I did:

              RotatedBox(
                      quarterTurns: 2,
                      child: ColorFiltered(
                        child: Image.asset('metronome_off.png', height: 25),
                        colorFilter: ColorFilter.mode(
                            Colors.yellow, BlendMode.exclusion),
                      ))

And tried all possible BlendMode. types. In all of them the image gets painted, but also the background. How can I paint only the image?

Would it be better instead to make this trapezoid in Flutter using some paint tools? I guess it'd be too hard.


Solution

  • Try this code:

    ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.yellow, BlendMode.srcATop),
      child: RotatedBox(
        quarterTurns: 2,
        child: Image.asset(
          "metronome_off.png",
          height: 25,
        ),
      ),
    )