Flutter equivalent off CSS backdrop-filter: blur(20px) saturation(180%)

Question

In order to add a "frosted glass" effect in CSS you just use backdrop-filter: blur(20px) saturation(180%). Creating a backdrop filter in Flutter is straight forward and should look similar to this:

      return ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
          child: Container(
            decoration: BoxDecoration(color: Colors.white.withOpacity(0.6)),
          ),
        ),
      );

However in order to have more vivid colors i really need to add more saturation to the filter. How am i supposed to do this in Flutter?

Solution

Unfortunately as far as I know what you're looking to do is not currently possible in Flutter. The configuration of shaders is not accessible through the ui library so you're stuck with what they offer which is limited to the blur effect.

I'd recommend opening an issue on the Flutter github page and asking them to add either a shader for saturation or a configurable shader.

There's also this: https://github.com/flutter/flutter/issues/12541