Add more docs to BackdropFilter (#28017)

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: <Widget>[
+///     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: <Widget>[
+///     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.