feat!: glass shadows now cut out the foreground shape to support offset shadows

`BlurStyle` is now ignored on shadows you pass to `LiquidGlass`, and always behaves similar to `BlurStyle.outer`.
When any shadow has a non-zero `offset`, the glass shape is cut out of the composed shadow stack so the shadow does not bleed through the translucent glass body.

Author: timcreatedit

packages/liquid_glass_renderer/example/lib/basic_app.dart

@@ -26,17 +26,25 @@ class BasicApp extends HookWidget {
     final tab = useState(0);
     final fake = useState(false);
 
+    final visibility = useState(true);
+    final visibilityValue = useSingleMotion(
+      value: visibility.value ? 1.0 : 0.0,
+      motion: Motion.smoothSpring(),
+    );
+
     final light = AlwaysStoppedAnimation(pi / 4);
 
     const shadows = [
       BoxShadow(
         blurStyle: BlurStyle.outer,
         color: Color.from(alpha: 0.05, red: 0, green: 0, blue: 0),
+        offset: Offset(0, 1),
         blurRadius: 2,
       ),
       BoxShadow(
         blurStyle: BlurStyle.outer,
         color: Color.from(alpha: 0.1, red: 0, green: 0, blue: 0),
+        offset: Offset(0, 8),
         blurRadius: 30,
       ),
     ];
@@ -95,9 +103,11 @@ class BasicApp extends HookWidget {
                     glassColor: CupertinoTheme.of(
                       context,
                     ).barBackgroundColor.withValues(alpha: 0.2),
+                    visibility: visibilityValue,
                   );
                   return LiquidGlassLayer(
                     fake: fake.value,
+                    useBackdropGroup: true,
                     settings: settings.copyWith(lightAngle: light.value),
                     child: LiquidGlassBlendGroup(
                       blend: blendNotifier.value,
@@ -109,19 +119,23 @@ class BasicApp extends HookWidget {
                             mainAxisSize: MainAxisSize.min,
                             spacing: 16,
                             children: [
-                              LiquidStretch(
-                                child: LiquidGlass.auto(
-                                  shadows: shadows,
-                                  shape: LiquidRoundedSuperellipse(
-                                    borderRadius: 20,
-                                  ),
-                                  child: GlassGlow(
-                                    child: SizedBox.square(
-                                      dimension: 100,
-                                      child: Center(
-                                        child: fake.value
-                                            ? Text('FAKE')
-                                            : Text('REAL'),
+                              GestureDetector(
+                                onTap: () =>
+                                    visibility.value = !visibility.value,
+                                child: LiquidStretch(
+                                  child: LiquidGlass.auto(
+                                    shadows: shadows,
+                                    shape: LiquidRoundedSuperellipse(
+                                      borderRadius: 20,
+                                    ),
+                                    child: GlassGlow(
+                                      child: SizedBox.square(
+                                        dimension: 100,
+                                        child: Center(
+                                          child: fake.value
+                                              ? Text('FAKE')
+                                              : Text('REAL'),
+                                        ),
                                       ),
                                     ),
                                   ),

packages/liquid_glass_renderer/example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,6 +5,8 @@
 import FlutterMacOS
 import Foundation
 
+import path_provider_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
 }

packages/liquid_glass_renderer/lib/src/fake_glass.dart

@@ -44,6 +44,11 @@ class FakeGlass extends StatelessWidget {
   final LiquidGlassSettings? settings;
 
   /// The list of shadows to paint around the glass shape.
+  ///
+  /// Only outer-equivalent shadows are supported; [BoxShadow.blurStyle] is
+  /// ignored. When any shadow has a non-zero [BoxShadow.offset], the glass
+  /// shape is cut out of the composed shadow stack so the shadow does not
+  /// bleed through the translucent glass body.
   final List<BoxShadow> shadows;
 
   /// The child widget that will be displayed inside the glass.

packages/liquid_glass_renderer/lib/src/glass_shadow.dart

@@ -27,6 +27,11 @@ class GlassShadow extends SingleChildRenderObjectWidget {
   final LiquidGlassSettings settings;
 
   /// The list of shadows to paint.
+  ///
+  /// Only outer-equivalent shadows are supported; [BoxShadow.blurStyle] is
+  /// ignored. When any shadow has a non-zero [BoxShadow.offset], the glass
+  /// shape is cut out of the composed shadow stack so the shadow does not
+  /// bleed through the translucent glass body.
   final List<BoxShadow> shadows;
 
   @override
@@ -90,42 +95,69 @@ class _RenderGlassShadow extends RenderProxyBox {
       final rect = offset & size;
       final canvas = context.canvas;
 
+      final needsCutout = shadows.any((s) => s.offset != Offset.zero);
+
+      if (needsCutout) {
+        var layerBounds = rect;
+        for (final shadow in shadows) {
+          layerBounds = layerBounds.expandToInclude(
+            rect.shift(shadow.offset).inflate(
+                  shadow.spreadRadius + shadow.blurRadius * visibility,
+                ),
+          );
+        }
+        canvas.saveLayer(layerBounds, Paint());
+      }
+
       for (final shadow in shadows) {
         final shadowRect =
             rect.shift(shadow.offset).inflate(shadow.spreadRadius);
         final paint = shadow
             .copyWith(
               blurRadius: shadow.blurRadius * visibility,
+              blurStyle: needsCutout ? BlurStyle.normal : BlurStyle.outer,
               color: shadow.color.withValues(
                 alpha: shadow.color.a * visibility,
               ),
             )
             .toPaint();
 
-        switch (shape) {
-          case LiquidRoundedSuperellipse(:final borderRadius):
-            canvas.drawRSuperellipse(
-              RSuperellipse.fromRectAndRadius(
-                shadowRect,
-                Radius.circular(borderRadius),
-              ),
-              paint,
-            );
-
-          case LiquidOval():
-            canvas.drawOval(shadowRect, paint);
-          case LiquidRoundedRectangle(:final borderRadius):
-            canvas.drawRRect(
-              RRect.fromRectAndRadius(
-                shadowRect,
-                Radius.circular(borderRadius),
-              ),
-              paint,
-            );
-        }
+        _drawShape(canvas, shadowRect, paint);
+      }
+
+      if (needsCutout) {
+        _drawShape(
+          canvas,
+          rect.deflate(.5),
+          Paint()..blendMode = BlendMode.dstOut,
+        );
+        canvas.restore();
       }
     }
 
     super.paint(context, offset);
   }
+
+  void _drawShape(Canvas canvas, Rect rect, Paint paint) {
+    switch (shape) {
+      case LiquidRoundedSuperellipse(:final borderRadius):
+        canvas.drawRSuperellipse(
+          RSuperellipse.fromRectAndRadius(
+            rect,
+            Radius.circular(borderRadius),
+          ),
+          paint,
+        );
+      case LiquidOval():
+        canvas.drawOval(rect, paint);
+      case LiquidRoundedRectangle(:final borderRadius):
+        canvas.drawRRect(
+          RRect.fromRectAndRadius(
+            rect,
+            Radius.circular(borderRadius),
+          ),
+          paint,
+        );
+    }
+  }
 }

packages/liquid_glass_renderer/lib/src/liquid_glass.dart

@@ -145,6 +145,11 @@ class LiquidGlass extends StatelessWidget {
   final (LiquidGlassSettings settings, bool fake)? ownLayerConfig;
 
   /// The list of shadows to paint.
+  ///
+  /// Only outer-equivalent shadows are supported; [BoxShadow.blurStyle] is
+  /// ignored. When any shadow has a non-zero [BoxShadow.offset], the glass
+  /// shape is cut out of the composed shadow stack so the shadow does not
+  /// bleed through the translucent glass body.
   final List<BoxShadow> shadows;
 
   /// Whether this glass should automatically detect a parent layer.

packages/liquid_glass_renderer/test/src/fake_glass_test.dart

@@ -101,5 +101,40 @@ void main() {
         ],
       ),
     );
+
+    goldenTest(
+      'offset shadow is cut out behind glass',
+      fileName: 'fake_glass_offset_shadow_cutout',
+      pumpBeforeTest: pumpOnce,
+      builder: () => GoldenTestGroup(
+        scenarioConstraints: testScenarioConstraints,
+        children: [
+          for (final visibility in [0.0, 0.5, 1.0])
+            GoldenTestScenario(
+              name: 'visibility ${visibility.toStringAsFixed(1)}',
+              child: buildWithGridPaper(
+                FakeGlass(
+                  settings: LiquidGlassSettings(
+                    visibility: visibility,
+                    blur: 0,
+                    saturation: 1,
+                    chromaticAberration: 0,
+                    lightIntensity: 0,
+                    glassColor: const Color.fromARGB(128, 0, 0, 255),
+                  ),
+                  shadows: const [
+                    BoxShadow(
+                      offset: Offset(16, 16),
+                      blurRadius: 24,
+                    ),
+                  ],
+                  shape: const LiquidRoundedSuperellipse(borderRadius: 40),
+                  child: const SizedBox.square(dimension: 300),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
   });
 }