In CSS, we can easily add filter effects to any component or element with the filter property, and now we’ve made Flutter support this too!

Why CSS Filter

Flutter provides a rich drawing interface that allows you to achieve almost any custom effect based on the canvas. Still, for application development, these interfaces are too low-level and cumbersome to use, requiring extensive documentation to achieve the desired effect.

Even with the BackdropFilter and ShaderMask provided by the framework to achieve filter effects, you also need to be very familiar with canvas drawing, the application of blending modes, and constantly tinkering and experimenting with parameters and values.

Is there a framework that offers a clean approach like using Python, or is there an awesome tech geek developing a library to solve these problems without much effort? Does anyone think like I do? How did they solve it?

An example from MDN.

We searched the search engines and the community for answers to our questions, and suddenly CSS Secrets on the desktop gave me an idea. 😂 The Web world has CSS filters and mix-blend-mode, their declarative APIs make it incredibly easy to apply filter effects, and the community has a lot of references for you. Finally, I found the silver bullet!

CSS Filter for Flutter

Our team finally decided to design an easy-to-use tool library for Flutter, similar to CSS Filter, when we were working on iofod’s requirements for generating Flutter code and implemented the core CSS Filter for Flutter code in our project, named css_filter.

IFstruct parser supports generating Flutter code from iofod visually edited projects. We have separated its filter module code and added many preset effects to form the current package, which facilitates all Flutter projects to use it.

We know that this package will never work only in iofod projects. Other developers using Flutter need this tool, too, so we spent our free time working on development and testing until today. It’s finally finished and born in the open source world! Thanks to all the supporters!

How to use it

After importing the package, you can use the basic filters through CSSFilter. Now it’s all easy; all you need to do to apply a filter effect to any component in Flutter is this:

Support filters:

• contrast()
• grayscale()
• sepia()
• hueRotate()
• brightness()
• saturate()
• invert()
• blur()
• opacity()

You can combine and overlay these filters in flutter just as you would with a CSS filter. Use CSSFilter.apply in conjunction with CSSFilterMatrix().

As with CSS Filter, you can combine filter effects, assuming you generate them through any online filter tool or find a piece of CSS code from the community:

Then the corresponding implementation in Flutter is:

With the same implementation, I’m sure you’ll never want to go back to the old days and write the following code:

See, now you have at least half an extra cup of coffee, feel free to use it to enhance your efficiency and create an extraordinary product experience.

For more usage, please check out our Github.

Instagram filter

The CSSgram project does an excellent job of providing the CSS world with Instagram-like filters, and instagram.css complements it with more types of filters. We’ve combined these two libraries to encapsulate several presets that can call through CSSFilterPresets.

Now you can use these filter effects with just one line of code:

The following are the Instagram filters we support:

We have also been inspired by other image beautification tools and will be adding more filters in the next major release, so stay tuned!

Next Plans

We know that CSS3 is mature, and there are many CSS filter generation tools alone. You can use them to generate preview effects and then convert them into Flutter code. Our next step is to launch a visualization tool that supports direct Flutter snippet code generation so that developers can copy and use it with one click.

Enjoy it! 😁