diff --git a/packages/flutter/lib/src/widgets/basic.dart b/packages/flutter/lib/src/widgets/basic.dart index 3701c16405c..1ab583370d1 100644 --- a/packages/flutter/lib/src/widgets/basic.dart +++ b/packages/flutter/lib/src/widgets/basic.dart @@ -333,7 +333,71 @@ class ShaderMask extends SingleChildRenderObjectWidget { } } -/// A widget that applies a filter to the existing painted content and then paints [child]. +/// A widget that applies a filter to the existing painted content and then +/// paints [child]. +/// +/// The filter will only be applied to the area of the background in which the +/// [child] (or one of its descendants) is actually going to paint in regardless +/// of the actual size of [child]. +/// +/// {@tool sample} +/// Even though the [BackdropFilter] is wrapping the [Container] below, the +/// background will only be blurred in the area defined by the bounding box +/// of the [Text] because that's the only area any descendant of the +/// [BackdropFilter] is painting in. +/// +/// ```dart +/// Stack( +/// fit: StackFit.expand, +/// children: [ +/// Text('0' * 10000), +/// Center( +/// child: BackdropFilter( +/// filter: ui.ImageFilter.blur( +/// sigmaX: 5.0, +/// sigmaY: 5.0, +/// ), +/// child: Container( +/// alignment: Alignment.center, +/// width: 200.0, +/// height: 200.0, +/// child: Text('Hello World'), +/// ), +/// ), +/// ), +/// ], +/// ) +/// ``` +/// +/// To blur the entire area of the [Container], increase the paint area of +/// the Container. Giving it a transparent background color will increase +/// the paint area of the container (and hence blur the background behind the +/// entire container) without changing other visual properties. +/// +/// ```dart +/// Stack( +/// fit: StackFit.expand, +/// children: [ +/// Text('0' * 10000), +/// Center( +/// child: BackdropFilter( +/// filter: ui.ImageFilter.blur( +/// sigmaX: 5.0, +/// sigmaY: 5.0, +/// ), +/// child: Container( +/// color: Colors.transparent, // <-- NEW +/// alignment: Alignment.center, +/// width: 200.0, +/// height: 200.0, +/// child: Text('Hello World'), +/// ), +/// ), +/// ), +/// ], +/// ) +/// ``` +/// {@end-tool} /// /// This effect is relatively expensive, especially if the filter is non-local, /// such as a blur.