BackdropFilter

Stac BackdropFilter allows you to build the Flutter BackdropFilter widget using JSON. This widget applies a filter to the existing painted content and then paints its child. It’s commonly used to create frosted glass effects, blurs, and other visual effects. To know more about the BackdropFilter widget in Flutter, refer to the official documentation for Backdrop Filter and Image Filter.

Properties

Property	Type	Description
`filter`	`StacImageFilter`	The image filter to apply to the existing painted content before painting the child.
`child`	`StacWidget`	The widget to paint after applying the filter to the existing painted content.
`enabled`	`bool`	Whether the filter should be applied. When false, the child is drawn without a filter. Defaults to `true`.
`blendMode`	`StacBlendMode`	The blend mode to apply when blending the filter with the existing content. Defaults to `BlendMode.srcOver`. Refer to BlendMode for available values.

Filter Types

The filter property accepts different types of image filters. Here are the supported filter types:

Blur Filter

Property	Type	Description
`type`	`String`	Must be set to `"blur"`.
`sigmaX`	`double`	The standard deviation in the horizontal direction. Defaults to `10.0`.
`sigmaY`	`double`	The standard deviation in the vertical direction. Defaults to same as `sigmaX`.

Dilate Filter

Property	Type	Description
`type`	`String`	Must be set to `"dilate"`.
`radiusX`	`double`	The radius in the horizontal direction.
`radiusY`	`double`	The radius in the vertical direction.

Erode Filter

Property	Type	Description
`type`	`String`	Must be set to `"erode"`.
`radiusX`	`double`	The radius in the horizontal direction.
`radiusY`	`double`	The radius in the vertical direction.

Compose Filter

Property	Type	Description
`type`	`String`	Must be set to `"compose"`.
`inner`	`StacImageFilter`	The inner filter to apply first.
`outer`	`StacImageFilter`	The outer filter to apply after the inner filter.

Usage Recommendations

For best results with BackdropFilter:

Use a Stack to position the BackdropFilter over content you want to filter
Wrap the BackdropFilter in a ClipRRect to constrain the filter to a specific area
Include a semi-transparent container as the child of the BackdropFilter to make the effect visible
Use fit: expand on the Stack to ensure proper sizing

Example

Example 1: Frosted Glass Effect

Dart
JSON
Preview

StacClipRRect(
  borderRadius: StacBorderRadius.all(16),
  child: StacSizedBox(
    height: 200,
    width: 300,
    child: StacStack(
      fit: StacStackFit.expand,
      children: [
        StacContainer(
          decoration: StacBoxDecoration(
            image: StacDecorationImage(
              src: 'https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg',
              fit: StacBoxFit.cover,
            ),
          ),
        ),
        StacBackdropFilter(
          filter: StacImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
          child: StacContainer(
            decoration: StacBoxDecoration(color: '#80FFFFFF'),
          ),
        ),
      ],
    ),
  ),
)

{
  "type": "clipRRect",
  "borderRadius": {
    "all": 16
  },
  "child": {
    "type": "sizedBox",
    "height": 200,
    "width": 300,
    "child": {
      "type": "stack",
      "fit": "expand",
      "children": [
        {
          "type": "container",
          "decoration": {
            "image": {
              "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg",
              "fit": "cover"
            }
          }
        },
        {
          "type": "backdropFilter",
          "filter": {
            "type": "blur",
            "sigmaX": 15,
            "sigmaY": 15
          },
          "child": {
            "type": "container",
            "decoration": {
              "color": "#80FFFFFF"
            }
          }
        }
      ]
    }
  }
}

Example 2: Dilate Filter Effect

StacClipRRect(
  borderRadius: StacBorderRadius.all(16),
  child: StacSizedBox(
    height: 200,
    width: 300,
    child: StacStack(
      fit: StacStackFit.expand,
      children: [
        StacContainer(
          decoration: StacBoxDecoration(
            image: StacDecorationImage(
              src: 'https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg',
              fit: StacBoxFit.cover,
            ),
          ),
        ),
        StacBackdropFilter(
          filter: StacImageFilter.dilate(radiusX: 2.0, radiusY: 2.0),
          child: StacContainer(
            decoration: StacBoxDecoration(color: '#80FFFFFF'),
          ),
        ),
      ],
    ),
  ),
)

{
  "type": "clipRRect",
  "borderRadius": {
    "all": 16
  },
  "child": {
    "type": "sizedBox",
    "height": 200,
    "width": 300,
    "child": {
      "type": "stack",
      "fit": "expand",
      "children": [
        {
          "type": "container",
          "decoration": {
            "image": {
              "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg",
              "fit": "cover"
            }
          }
        },
        {
          "type": "backdropFilter",
          "filter": {
            "type": "dilate",
            "radiusX": 2.0,
            "radiusY": 2.0
          },
          "child": {
            "type": "container",
            "decoration": {
              "color": "#80FFFFFF"
            }
          }
        }
      ]
    }
  }
}

Example 3: Compose Filter (Blur + Dilate)

StacClipRRect(
  borderRadius: StacBorderRadius.all(16),
  child: StacSizedBox(
    height: 200,
    width: 300,
    child: StacStack(
      fit: StacStackFit.expand,
      children: [
        StacContainer(
          decoration: StacBoxDecoration(
            image: StacDecorationImage(
              src: 'https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg',
              fit: StacBoxFit.cover,
            ),
          ),
        ),
        StacBackdropFilter(
          filter: StacImageFilter.compose(
            outer: StacImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
            inner: StacImageFilter.dilate(radiusX: 2.0, radiusY: 2.0),
          ),
          child: StacContainer(
            decoration: StacBoxDecoration(color: '#80FFFFFF'),
          ),
        ),
      ],
    ),
  ),
)

{
  "type": "clipRRect",
  "borderRadius": {
    "all": 16
  },
  "child": {
    "type": "sizedBox",
    "height": 200,
    "width": 300,
    "child": {
      "type": "stack",
      "fit": "expand",
      "children": [
        {
          "type": "container",
          "decoration": {
            "image": {
              "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg",
              "fit": "cover"
            }
          }
        },
        {
          "type": "backdropFilter",
          "filter": {
            "type": "compose",
            "outer": {
              "type": "blur",
              "sigmaX": 5.0,
              "sigmaY": 5.0
            },
            "inner": {
              "type": "dilate",
              "radiusX": 2.0,
              "radiusY": 2.0
            }
          },
          "child": {
            "type": "container",
            "decoration": {
              "color": "#80FFFFFF"
            }
          }
        }
      ]
    }
  }
}

Common Issues and Solutions

Issue: Filter affects entire screen

If your backdrop filter is affecting the entire screen instead of just a specific area, make sure to:

Wrap the BackdropFilter in a ClipRRect to constrain its effects
Use a Stack with the BackdropFilter as a child positioned over the content to filter
Make sure the BackdropFilter is not at the root level of your widget tree

Issue: Filter not visible

If your filter effect isn’t visible:

Ensure the child of the BackdropFilter has a semi-transparent color (e.g., #80FFFFFF)
Check that the filter parameters (like sigmaX and sigmaY for blur) are large enough to be noticeable
Verify that the content behind the filter has sufficient contrast to make the effect visible

Layout Widgets

Display Widgets

Interactive Widgets

Data Widgets

BackdropFilter

Properties

Filter Types

Blur Filter

Dilate Filter

Erode Filter

Compose Filter

Usage Recommendations

Example

Example 1: Frosted Glass Effect

Example 2: Dilate Filter Effect

Example 3: Compose Filter (Blur + Dilate)

Common Issues and Solutions

Issue: Filter affects entire screen

Issue: Filter not visible

​Properties

​Filter Types

​Blur Filter

​Dilate Filter

​Erode Filter

​Compose Filter

​Usage Recommendations

​Example

​Example 1: Frosted Glass Effect

​Example 2: Dilate Filter Effect

​Example 3: Compose Filter (Blur + Dilate)

​Common Issues and Solutions

​Issue: Filter affects entire screen

​Issue: Filter not visible

Properties

Filter Types

Blur Filter

Dilate Filter

Erode Filter

Compose Filter

Usage Recommendations

Example

Example 1: Frosted Glass Effect

Example 2: Dilate Filter Effect

Example 3: Compose Filter (Blur + Dilate)

Common Issues and Solutions

Issue: Filter affects entire screen

Issue: Filter not visible