Image Filters in Flutter | No Package Required 💙

Slowly but Surely

Setup

ColorFiltered

  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

Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
  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.

Back to the Code

How easy was that!✌ Flutter is Magic! 💙

Saving Image with Filter Applied 📲

Voilà 💙

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paras Jain

Paras Jain

Mobile Application and Web Developer | @Youtube Content Creator | Worship #reactjs #flutter #java #dart | youtube.com/retroportalstudio