colorBlendMode doesn't regard transparent background

Viewed 50

I have a grayscale image asset with a transparent background that I would like to overlay with different colors based on the theme color, but none of the BlendModes are providing what I want to do exactly. Here's what the two closest BlendModes look like:

BlendMode.Modulate

BlendMode.overlay

The first one is BlendMode.modulate, and the second one is BlendMode.overlay. Modulate basically darkens the image with the given color, but doesn't touch the transparent parts. Overlay does exactly what I want on the image, but also covers the background, which looks horrible. What I want to do is overlay WITHOUT covering the transparent parts. I tried all the BlendModes but none work. BlendMode.srcATop fills the image with the solid color instead of overlaying it. Adding transparency to the color without using a colorBlendMode just works similar to modulate. What can I do?

                    SizedBox(
                      height: constraints.maxHeight * 0.4,
                      child: Image.asset(
                        'assets/images/empty-list.png',
                        colorBlendMode: BlendMode.srcATop,
                        color: Theme.of(context).primaryColor,
                        fit: BoxFit.cover,
                      ),
                    ),
0 Answers
Related