BackdropFilterModifier class

A widget that applies a filter to the existing painted content and then paints child.

The filter will be applied to all the area within its parent or ancestor widget's clip. If there's no clip, the filter will be applied to the full screen.

The results of the filter will be blended back into the background using the blendMode parameter. The only value for blendMode that is supported on all platforms is BlendMode.srcOver which works well for most scenes. But that value may produce surprising results when a parent of the BackdropFilter uses a temporary buffer, or save layer, as does an Opacity widget. In that situation, a value of BlendMode.src can produce more pleasing results, but at the cost of incompatibility with some platforms, most notably the html renderer for web applications.

{@tool snippet} If the BackdropFilter needs to be applied to an area that exactly matches its child, wraps the BackdropFilter with a clip widget that clips exactly to that child.

Stack(
  fit: StackFit.expand,
  children: <Widget>[
    Text('0' * 10000),
    Center(
      child: ClipRect(  // <-- clips to the 200x200 [Container] below
        child: BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: Container(
            alignment: Alignment.center,
            width: 200.0,
            height: 200.0,
            child: const Text('Hello World'),
          ),
        ),
      ),
    ),
  ],
)

{@end-tool}

This effect is relatively expensive, especially if the filter is non-local, such as a blur.

If all you want to do is apply an ImageFilter to a single widget (as opposed to applying the filter to everything beneath a widget), use ImageFiltered instead. For that scenario, ImageFiltered is both easier to use and less expensive than BackdropFilter.

See also:

• ImageFiltered, which applies an ImageFilter to its child.
• DecoratedBox, which draws a background under (or over) a widget.
• Opacity, which changes the opacity of the widget itself.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• SingleChildStatelessModifier
• BackdropFilterModifier

Available extensions

• ModifierTransformer

Constructors

BackdropFilterModifier({Key? key, Widget? child, Key? modifierKey, required ImageFilter filter, BlendMode blendMode = BlendMode.srcOver})

Creates a backdrop filter.

const

Properties

blendMode → BlendMode

The blend mode to use to apply the filtered background content onto the background surface.

final

filter → ImageFilter

The image filter to apply to the existing painted content before painting the child.

final

hashCode → int

The hash code for this object.

no setter, inherited

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

modifierKey → Key?

The actual key of the widget, which Modifier wrapped

final, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

build(BuildContext context) → Widget

Describes the part of the user interface represented by this widget.

inherited

buildWithChild(BuildContext context, Widget? child) → Widget

A build method that receives an extra child parameter.

override

createElement() → SingleChildStatelessElement

Create a SingleChildStatelessElement

inherited

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

modified() → Modifier

Available on Widget, provided by the ModifierTransformer extension

Transform normal widget to Modifier

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited