Filter Images in Flutter

#productivity #dart #flutter

I've been finding some really interesting "hacks" that have helped me a lot to come up with easy solutions during my internship as a Flutter Dev.

One such solution was using ColorFiltered Widget in Flutter to Filter my images. Initially, our designer could provide any necessary images or assets required to build UI. But the problem came when there were multiple "versions" of the same image. By versions, I mean the same image in different colors and transparency. In fact, if I calculate, there were approximately 15 images that had around 3 versions each that had just color changes.

That's around 45 images. As a developer, keeping all the images that were only different in color wouldn't make much sense. This would increase the App Size and my work as I would have to manage all the images with their proper locations and whatnot. Apart from that, I would have to load a different image every time, which again doesn't make sense as it would probably add unnecessary load to the App.

Luckily, Flutter has the widget called ColorFiltered that can handle all of that for me. Here's what I did.

I had this original image:

And this was one of the versions of the same image: (Ignore the background)

Similarly, as stated before, there were 15 different images and 3 such "versions" of these images. Here's an example for the above 2 images I used in Flutter.

ColorFiltered(
child: Image.asset("assets/images/originalImage.png", scale: 5,),
colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),)
),

The ColorFiltered widget has the colorFilter property that we can use to add filters to a Widget. I added a white color and used BlendMode class that can be used to blend pixels. srcIn is just a property that overlaps both the color and on the original image. There are a lot of properties for the BlendMode class that are provided by the folks at Flutter and you can check them out here.

This gave me exactly the image I wanted:

With just 2 lines of code, I was able to reduce around 45 images 15, and what's better? I didn't even have to trouble the designer for the images and did it myself without much hassle and the help of Flutter, of course!