[EFFECTS] Background blur works with arbitrary shapes

Author: darionco

package/pheno_ui/lib/models/figma_effects_model.dart

@@ -2,9 +2,9 @@ import 'dart:ui';
 
 import 'package:flutter/widgets.dart';
 
-import '../interface/log.dart';
 import '../widgets/inner_shadow.dart';
 import '../widgets/outer_shadow.dart';
+import '../widgets/background_blur.dart';
 
 class FigmaEffectsModel {
   final List<_FigmaEffect> _effects;
@@ -218,11 +218,9 @@ class _FigmaBackgroundBlur extends _FigmaEffect {
   Widget apply(Widget child) {
     if (!visible) return child;
 
-    return ClipRect(
-      child: BackdropFilter(
-        filter: ImageFilter.blur(sigmaX: radius * 0.5, sigmaY: radius * 0.5),
-        child: child,
-      ),
+    return BackgroundBlur(
+      radius: radius,
+      child: child,
     );
   }
 }

package/pheno_ui/lib/widgets/background_blur.dart

@@ -0,0 +1,71 @@
+import 'dart:ui';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+class BackgroundBlur extends SingleChildRenderObjectWidget {
+  final double radius;
+
+  const BackgroundBlur({
+    required this.radius,
+    super.child,
+    super.key,
+  });
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    final renderObject = RenderBackgroundBlur();
+    updateRenderObject(context, renderObject);
+    return renderObject;
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, RenderBackgroundBlur renderObject) {
+    renderObject.radius = radius;
+  }
+}
+
+class RenderBackgroundBlur extends RenderProxyBox {
+  late double radius;
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    if (child == null) return;
+    final bounds = offset & size;
+
+    const forceWhite = ColorFilter.matrix(<double>[
+      255, 0, 0, 0, 255,
+      0, 255, 0, 0, 255,
+      0, 0, 255, 0, 255,
+      0, 0, 0, 255, 0,
+    ]);
+
+    final maskPaint = Paint()
+      ..color = const Color(0xFFFFFFFF)
+      ..blendMode = BlendMode.dstIn
+      ..imageFilter = ImageFilter.compose(
+        inner: forceWhite,
+        outer: ImageFilter.blur(sigmaX: 1, sigmaY: 1),
+      )
+    ;
+
+    BackdropFilterLayer backdropFilterLayer = BackdropFilterLayer(
+      filter: ImageFilter.blur(sigmaX: radius * 0.5, sigmaY: radius * 0.5),
+    );
+
+    // clip the image to optimize multiple backdrop filters on screen:
+    // https://github.com/flutter/flutter/issues/126353
+    context.pushClipRect(true, offset, Offset.zero & size, (context, offset) {
+      // push the backdrop filter
+      context.pushLayer(backdropFilterLayer, (context, offset) {
+        // mask the effect based on the children being rendered
+        context.canvas.saveLayer(bounds, maskPaint);
+        context.paintChild(child!, offset);
+        context.canvas.restore();
+      }, offset);
+    });
+
+    // paint the original child on top of the effect
+    // NOTE: The children must be translucent for the effect to be visible
+    context.paintChild(child!, offset);
+  }
+}