What is the BackdropFilter class in Flutter?

Overview

Flutter is an open-source framework created by Google. It is used to build efficient, natively compiled, and multi-platform applications from a single codebase.

BackdropFilter

In Flutter, we use the BackdropFilter class to apply a filter to the existing painted content and to paint the child.
This class is applied to the area under its parent or ancestor widget. If there is no such widget, we apply the class to the whole screen.

Parameters

We use the blendMode parameter to show that the results of the filter are blended back into the background.

BlendMode.srcOver is the most common value for the blendMode parameter. It is supported on all the platforms and works for most cases during development.

Assuming that the BackdropFilter class is applied to an area that precisely matches its child, it wraps this class with a clip widget that clips precisely to that child.

Example

 Stack(
  fit: StackFit.expand,
  children: <Widget>[
      Image.network('https://picsum.photos/250?image=9'),
      Center(
      child: ClipRect( 
        child: BackdropFilter(
          filter: ImageFilter.blur(
            sigmaX: 10.0,
            sigmaY: 10.0,
          ),
          child: Container(
            alignment: Alignment.bottomCenter,
            width: 300.0,
            height: 300.0,
            child: const Text('New TEXT on blur screen'),
          ),
        ),
      ),
    ),
  ],
Backdrop filter

Explanation

  • Line 1–5: We use Stack and provide a text child.
  • Line 6–7: We make another child, ClipRect, and apply the Backdropfilter method to its child.
  • Line 8–11: We use the blur property and assign values to sigmaX and sigmaY.
  • Line 12–16: We provide a new text widget to its child.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)