Image Filters in Flutter | No Package Required 💙

In one of my recent apps, I had to implement this feature of adding Filters to Images. I was confident that there will be a package for this, so I did the usual Google Search. But just a few hours later, after trying out a few packages, I realized that there are not many options to choose from for adding image Filters to your Flutter Application. The packages that are available are horribly slow for Production Applications. Sure, they do give some nice bells and whistles but …

Slowly but Surely

In the end, of course, I had to figure out a different strategy for my Flutter App, so let’s take a look at what approach I found best for this.

Setup

Well, the first thing that you need to have is an Image that you can display in your app using the Image Widget. You can get the image from File Storage using the file_picker, Add it to your application’s assets folder or load it via the network using “Image.network” constructor. Once this is done and you successfully can view the image on your app, the next step is to warp the Image widget with a ColorFiltered widget and this is where the magic happens. So let’s take a look at what is ColorFiltered Widget.

ColorFiltered

So, the ColorFiltered widget requires an instance of ColorFilter. This ColorFilter class has 2 main constructors, one is the “mode” and another one is the “matrix”.

1. mode: This constructor creates a ColorFilter that blends itself onto the underlying image based on the BlendMode you provide. This is quite basic and can only do so much because your filter in this case only has one color to work with. If you need to create a filter that manipulates colors on a much deeper level, this won’t do any good. But thankfully, this is where “matrix” comes into play.
2. matrix: This matrix constructor requires a list of doubles (List<double>). At this point just consider these doubles as different values to manipulate different colors in your Image. This constructor expects you to provide a list of 20 double values. Based on these 20 values it will create a 5x5 matrix by adding additional 5 values of its own. Now the color filter created with this matrix is powerful enough to create some really cool and unique filters. The matrix we are talking about here, in more technical terms is called a “feColorMatrix”. So let’s take a look at what this is.

feColorMatrix

If you are working with Images, you will probably know that images (in their most basic form) are made of Pixels. And each of these pixels in turn has values for Red, Green, Blue, and Alpha (transparency). Now if we want to add a filter to an image, we need to manipulate the pixels of that image and for doing so we have to adjust these RGBA values.

Now we can visualize RGBA values of a pixel as a 4 x 1 matrix. And technically to manipulate the values of this pixel we have to multiply this 4x1 matrix with another matrix. And the values of this second matrix have to be calculated based on the changes we want to make in the said pixel. To help you out, here is the visual representation of what you just read:

Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

You can ignore the 5th Row with “1” in it.

Now, that 5x5 matrix you see in the middle is called the feColorMatrix that is used to manipulate the RGBA values of each pixel in the image.

This is as simple as I could go with the feColorMatrix but there is much more to learn if you have the time. Here is the link.

So, now that we have the basic understanding of this matrix and its purpose. How do we actually create one!. Well, thankfully there are a bunch of tools online that help us do this while visualizing the changes as we make them. One of the best ones that I have found is this:

feColorMatrix Generator: https://kazzkiq.github.io/svg-color-filter/

This tool looks something like this:

In the green chips, you can see that there are some presets for the color Matrix. I have loaded a beautiful flower image just for demonstration and just by manipulating a few values in the matrix, I have a color filter for this image.

You can try these values out for yourself and create your own filters but there are a few things you should keep in mind:

1. Do not use a single image for Testing. Test out the filter on multiple images and choose only those which work out best in most cases.
2. Try filters that only use the first 4 rows and 4 columns for best consistent results.

Once you have a finalized matrix you can use this directly in the ColorFilter’s “matrix” constructor.

Back to the Code

Now, Let’s take a look at what our code should look like with an Image wrapped with a ColorFiltered widget with a filter of our given feColorMatrix.

Here I am using a matrix of my own creation and in the application you will get an output like this:

How easy was that!✌ Flutter is Magic! 💙

Now that we have our Filter Applied, we definitely should be able to save this to a file. Well, one thing you have to know is that the ColorFiltered widget is just changing how “YOU” see the image, it does not alter the actual image data, nor does it create any copy of that image data for you.

So how do we get the filtered image? By a Widget Capture of Course!

Saving Image with Filter Applied 📲

To achieve this, you need to wrap the Image widget or the immediate parent by the RepaintBoundary widget. Now, we need to set the “key” property of this RepaintBoundary with a new GlobalKey. With this Global Key, we will be able to access the state of this widget at any point (click of a button or something )and extract the Widget as a jpeg or png image. The function for this will look something like:

Now you can run this function on a button click or some other event, and you will have the Uint8List data of the Image with Filters baked into it. You can now use this to save the Image to Local Storage or upload it to a Remote Server.

Voilà 💙

This is how easy to get basic ImageFilters in your Flutter Apps with your own custom filters.

And for those who have read this far and found this helpful, here are Some Bonus Filters for you to work with 💙

Note: For Applications that focus completely on Image Editing. The optimal way would be use it for Visual Purposes and then use some native to translate the same effect to Actual Image (for lossless performance).

If you like to have a visual representation for reference, check out this tutorial on my Youtube Channel and you’ll have a good idea! And while you’re there, if you find this useful, consider Subscribing and Sharing!

If you find this Useful, Consider Subscribing to RetroPortal Studio on Youtube at:

RetroPortal Studio

Here are the links to my other Social Media Handles:

Twitter: https://www.youtube.com/theretroportal

Instagram: https://www.instagram.com/retroportalstudio

LinkedIn: https://www.linkedin.com/in/parasjainrps

Github: https://github.com/retroportalstudio

Happy Coding! ✌😁