fluttergithubbot
diff --git a/‎packages/flutter/lib/src/cupertino/dialog.dart
Lines changed: 179 additions & 21 deletions b/‎packages/flutter/lib/src/cupertino/dialog.dart
Lines changed: 179 additions & 21 deletions
@@ -79,7 +79,6 @@ const TextStyle _kActionSheetContentStyle = TextStyle(
 );
 
 // Generic constants shared between Dialog and ActionSheet.
-const double _kBlurAmount = 20.0;
 const double _kCornerRadius = 14.0;
 const double _kDividerThickness = 0.3;
 
@@ -492,20 +491,34 @@ class _CupertinoAlertDialogState extends State<CupertinoAlertDialog> {
   }
 }
 
-/// Rounded rectangle surface that looks like an iOS popup surface, e.g., alert dialog
-/// and action sheet.
+/// An iOS-style component for creating modal overlays like dialogs and action
+/// sheets.
 ///
-/// A [CupertinoPopupSurface] can be configured to paint or not paint a white
-/// color on top of its blurred area. Typical usage should paint white on top
-/// of the blur. However, the white paint can be disabled for the purpose of
-/// rendering divider gaps for a more complicated layout, e.g., [CupertinoAlertDialog].
-/// Additionally, the white paint can be disabled to render a blurred rounded
-/// rectangle without any color (similar to iOS's volume control popup).
+/// By default, [CupertinoPopupSurface] generates a rounded rectangle surface
+/// that applies two effects to the background content:
+///
+///   1. Background filter: Saturates and then blurs content behind the surface.
+///   2. Overlay color: Covers the filtered background with a transparent
+///      surface color. The color adapts to the CupertinoTheme's brightness:
+///      light gray when the ambient [CupertinoTheme] brightness is
+///      [Brightness.light], and dark gray when [Brightness.dark].
+///
+/// The blur strength can be changed by setting [blurSigma] to a positive value,
+/// or removed by setting the [blurSigma] to 0.
+///
+/// The saturation effect can be removed for debugging by setting
+/// [debugIsVibrancePainted] to false. The saturation effect is not supported on
+/// web with the skwasm renderer and will not be applied regardless of the value
+/// of [debugIsVibrancePainted].
+///
+/// The surface color can be disabled by setting [isSurfacePainted] to false,
+/// which is useful for more complicated layouts, such as rendering divider gaps
+/// in [CupertinoAlertDialog] or rendering custom surface colors.
 ///
 /// {@tool dartpad}
 /// This sample shows how to use a [CupertinoPopupSurface]. The [CupertinoPopupSurface]
-/// shows a model popup from the bottom of the screen.
-/// Toggling the switch to configure its surface color.
+/// shows a modal popup from the bottom of the screen.
+/// Toggle the switch to configure its surface color.
 ///
 /// ** See code in examples/api/lib/cupertino/dialog/cupertino_popup_surface.0.dart **
 /// {@end-tool}
@@ -519,9 +532,29 @@ class CupertinoPopupSurface extends StatelessWidget {
   /// Creates an iOS-style rounded rectangle popup surface.
   const CupertinoPopupSurface({
     super.key,
+    this.blurSigma = defaultBlurSigma,
     this.isSurfacePainted = true,
-    this.child,
-  });
+    this.debugIsVibrancePainted = true,
+    required this.child,
+  }) : assert(blurSigma >= 0, 'CupertinoPopupSurface requires a non-negative blur sigma.');
+
+  /// The strength of the gaussian blur applied to the area beneath this
+  /// surface.
+  ///
+  /// Defaults to [defaultBlurSigma]. Setting [blurSigma] to 0 will remove the
+  /// blur filter.
+  final double blurSigma;
+
+  /// Whether or not the area beneath this surface should be saturated with a
+  /// [ColorFilter].
+  ///
+  /// The appearance of the [ColorFilter] is determined by the [Brightness]
+  /// value obtained from the ambient [CupertinoTheme].
+  ///
+  /// The vibrance is always painted if asserts are disabled.
+  ///
+  /// Defaults to true.
+  final bool debugIsVibrancePainted;
 
   /// Whether or not to paint a translucent white on top of this surface's
   /// blurred background. [isSurfacePainted] should be true for a typical popup
@@ -531,26 +564,148 @@ class CupertinoPopupSurface extends StatelessWidget {
   /// Some popups, like iOS's volume control popup, choose to render a blurred
   /// area without any white paint covering it. To achieve this effect,
   /// [isSurfacePainted] should be set to false.
+  ///
+  /// Defaults to true.
   final bool isSurfacePainted;
 
   /// The widget below this widget in the tree.
-  final Widget? child;
+  // Because [CupertinoPopupSurface] is composed of proxy boxes, which mimic
+  // the size of their child, a [child] is required to ensure that this surface
+  // has a size.
+  final Widget child;
+
+  /// The default strength of the blur applied to widgets underlying a
+  /// [CupertinoPopupSurface].
+  ///
+  /// Eyeballed from the iOS 17 simulator.
+  static const double defaultBlurSigma = 30.0;
+
+  /// The default corner radius of a [CupertinoPopupSurface].
+  static const BorderRadius _clipper = BorderRadius.all(Radius.circular(14));
+
+  // The [ColorFilter] matrix used to saturate widgets underlying a
+  // [CupertinoPopupSurface] when the ambient [CupertinoThemeData.brightness] is
+  // [Brightness.light].
+  //
+  // To derive this matrix, the saturation matrix was taken from
+  // https://docs.rainmeter.net/tips/colormatrix-guide/ and was tweaked to
+  // resemble the iOS 17 simulator.
+  //
+  // The matrix can be derived from the following function:
+  // static List<double> get _lightSaturationMatrix {
+  //    const double lightLumR = 0.26;
+  //    const double lightLumG = 0.4;
+  //    const double lightLumB = 0.17;
+  //    const double saturation = 2.0;
+  //    const double sr = (1 - saturation) * lightLumR;
+  //    const double sg = (1 - saturation) * lightLumG;
+  //    const double sb = (1 - saturation) * lightLumB;
+  //    return <double>[
+  //      sr + saturation, sg, sb, 0.0, 0.0,
+  //      sr, sg + saturation, sb, 0.0, 0.0,
+  //      sr, sg, sb + saturation, 0.0, 0.0,
+  //      0.0, 0.0, 0.0, 1.0, 0.0,
+  //    ];
+  //  }
+  static const List<double> _lightSaturationMatrix = <double>[
+     1.74, -0.40, -0.17, 0.00, 0.00,
+    -0.26,  1.60, -0.17, 0.00, 0.00,
+    -0.26, -0.40,  1.83, 0.00, 0.00,
+     0.00,  0.00,  0.00, 1.00, 0.00
+  ];
+
+  // The [ColorFilter] matrix used to saturate widgets underlying a
+  // [CupertinoPopupSurface] when the ambient [CupertinoThemeData.brightness] is
+  // [Brightness.dark].
+  //
+  // To derive this matrix, the saturation matrix was taken from
+  // https://docs.rainmeter.net/tips/colormatrix-guide/ and was tweaked to
+  // resemble the iOS 17 simulator.
+  //
+  // The matrix can be derived from the following function:
+  // static List<double> get _darkSaturationMatrix {
+  //    const double additive = 0.3;
+  //    const double darkLumR = 0.45;
+  //    const double darkLumG = 0.8;
+  //    const double darkLumB = 0.16;
+  //    const double saturation = 1.7;
+  //    const double sr = (1 - saturation) * darkLumR;
+  //    const double sg = (1 - saturation) * darkLumG;
+  //    const double sb = (1 - saturation) * darkLumB;
+  //    return <double>[
+  //      sr + saturation, sg, sb, 0.0, additive,
+  //      sr, sg + saturation, sb, 0.0, additive,
+  //      sr, sg, sb + saturation, 0.0, additive,
+  //      0.0, 0.0, 0.0, 1.0, 0.0,
+  //    ];
+  //  }
+  static const List<double> _darkSaturationMatrix = <double>[
+     1.39, -0.56, -0.11, 0.00, 0.30,
+    -0.32,  1.14, -0.11, 0.00, 0.30,
+    -0.32, -0.56,  1.59, 0.00, 0.30,
+     0.00,  0.00,  0.00, 1.00, 0.00
+  ];
+
+  ImageFilter? _buildFilter(Brightness? brightness) {
+    bool isVibrancePainted = true;
+    assert(() {
+      isVibrancePainted = debugIsVibrancePainted;
+      return true;
+    }());
+    if ((kIsWeb && !isSkiaWeb) || !isVibrancePainted) {
+      if (blurSigma == 0) {
+        return null;
+      }
+      return ImageFilter.blur(
+        sigmaX: blurSigma,
+        sigmaY: blurSigma,
+      );
+    }
+
+    final ColorFilter colorFilter = switch (brightness) {
+      Brightness.dark          => const ColorFilter.matrix(_darkSaturationMatrix),
+      Brightness.light || null => const ColorFilter.matrix(_lightSaturationMatrix)
+    };
+
+    if (blurSigma == 0) {
+      return colorFilter;
+    }
+
+    return ImageFilter.compose(
+      inner: colorFilter,
+      outer: ImageFilter.blur(
+        sigmaX: blurSigma,
+        sigmaY: blurSigma,
+      ),
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
-    Widget? contents = child;
+    final ImageFilter? filter = _buildFilter(CupertinoTheme.maybeBrightnessOf(context));
+    Widget contents = child;
+
     if (isSurfacePainted) {
       contents = ColoredBox(
         color: CupertinoDynamicColor.resolve(_kDialogColor, context),
         child: contents,
       );
     }
+
+    if (filter != null) {
+      return ClipRRect(
+        borderRadius: _clipper,
+        child: BackdropFilter(
+          blendMode: BlendMode.src,
+          filter: filter,
+          child: contents,
+        ),
+      );
+    }
+
     return ClipRRect(
-      borderRadius: const BorderRadius.all(Radius.circular(_kCornerRadius)),
-      child: BackdropFilter(
-        filter: ImageFilter.blur(sigmaX: _kBlurAmount, sigmaY: _kBlurAmount),
-        child: contents,
-      ),
+      borderRadius: _clipper,
+      child: contents,
     );
   }
 }
@@ -1125,7 +1280,10 @@ class _CupertinoActionSheetState extends State<CupertinoActionSheet> {
         child: ClipRRect(
           borderRadius: const BorderRadius.all(Radius.circular(12.0)),
           child: BackdropFilter(
-            filter: ImageFilter.blur(sigmaX: _kBlurAmount, sigmaY: _kBlurAmount),
+            filter: ImageFilter.blur(
+              sigmaX: CupertinoPopupSurface.defaultBlurSigma,
+              sigmaY: CupertinoPopupSurface.defaultBlurSigma,
+            ),
             child: _ActionSheetMainSheet(
               pressedIndex: _pressedIndex,
               onPressedUpdate: _onPressedUpdate,