Blend Modes #6

Author: SaadArdati

lib/src/transformers/node_transformers/passive_rectangle_transformer.dart

@@ -125,6 +125,44 @@ class PassiveRectangleWidget extends StatelessWidget {
       }
     }
 
+    Widget child = Stack(
+      clipBehavior: Clip.none,
+      alignment:
+          stackAlignment.flutterAlignment ?? AlignmentDirectional.topStart,
+      children: [
+        ...buildFills(
+          node,
+          useInk: false,
+          obscureImages: settings.obscureImages,
+          settings: settings,
+          scopedValues: scopedValues,
+        ),
+        ...buildStrokes(node, scopedValues),
+        ...wrapWithInkWell(
+          context,
+          node,
+          wrapWithPaddingAndScroll(
+            node,
+            [
+              ...children,
+              if (portalWidget != null) portalWidget,
+            ],
+            stackAlignment: stackAlignment,
+            applyPadding: applyPadding,
+          ),
+        ),
+      ],
+    );
+
+    bool hasComplexRendering = node is GeometryMixin &&
+        (node as GeometryMixin).fills.any(
+              (PaintModel fill) => fill.blendMode != BlendModeC.srcOver,
+            );
+
+    if (hasComplexRendering) {
+      child = BlendMask(child: child);
+    }
+
     Widget data = Container(
       key: ValueKey('Rectangle Transformer of ${node.debugLabel}'),
       clipBehavior: getClipBehavior(node),
@@ -134,34 +172,7 @@ class PassiveRectangleWidget extends StatelessWidget {
         boxShadow: retrieveBoxShadow(node, scopedValues),
         borderRadius: getBorderRadius(node),
       ),
-      child: Stack(
-        clipBehavior: Clip.none,
-        alignment:
-            stackAlignment.flutterAlignment ?? AlignmentDirectional.topStart,
-        children: [
-          ...buildFills(
-            node,
-            useInk: false,
-            obscureImages: settings.obscureImages,
-            settings: settings,
-            scopedValues: scopedValues,
-          ),
-          ...buildStrokes(node, scopedValues),
-          ...wrapWithInkWell(
-            context,
-            node,
-            wrapWithPaddingAndScroll(
-              node,
-              [
-                ...children,
-                if (portalWidget != null) portalWidget,
-              ],
-              stackAlignment: stackAlignment,
-              applyPadding: applyPadding,
-            ),
-          ),
-        ],
-      ),
+      child: child,
     );
 
     return data;
@@ -599,32 +610,29 @@ List<Widget> buildFills(
     );
 
     if (lastBlendTree.isNotEmpty) {
-      fill = Stack(
-        fit: StackFit.expand,
-        children: [
-          fill,
-          for (final paint in lastBlendTree.reversed)
-            if (paint.visible)
-              Positioned.fill(
-                child: BlendMask(
-                  key: ObjectKey(paint.blendMode),
-                  blendMode: paint.blendMode.flutterBlendMode,
-                  child: buildFill(
-                    node,
-                    index: node.fills.indexOf(paint),
-                    imageBytes: imageBytes,
-                    imageOpacity: imageOpacity,
-                    imageRotation: imageRotation,
-                    imageFillBuilder: imageFillBuilder,
-                    useInk: useInk,
-                    obscureImages: obscureImages,
-                    settings: settings,
-                    scopedValues: scopedValues,
-                  ),
-                ),
+      for (final paint in lastBlendTree) {
+        if (!paint.visible) continue;
+        raster.add(
+          Positioned.fill(
+            child: BlendMask(
+              key: ObjectKey(paint.blendMode),
+              blendMode: paint.blendMode.flutterBlendMode,
+              child: buildFill(
+                node,
+                index: node.fills.indexOf(paint),
+                imageBytes: imageBytes,
+                imageOpacity: imageOpacity,
+                imageRotation: imageRotation,
+                imageFillBuilder: imageFillBuilder,
+                useInk: useInk,
+                obscureImages: obscureImages,
+                settings: settings,
+                scopedValues: scopedValues,
               ),
-        ],
-      );
+            ),
+          ),
+        );
+      }
     }
 
     lastBlendTree.clear();
@@ -766,28 +774,7 @@ Widget buildFill(
           child: child,
         );
       }
-
-      if (node.isHorizontalWrap || node.isVerticalWrap) {
-        // if the node is shrink-wrapping on one or both axes, then we
-        // need to wrap the image in a Positioned widget so that it
-        // doesn't expand to the size of the parent.
-        return child;
-      }
-
       return child;
-
-    // if (node.childrenOrEmpty.isEmpty) {
-    //   // If we don't do this then shrink-wrapping images will not work.
-    //   // They will expand to the size of the parent.
-    //   return child;
-    // } else {
-    //   // This was Positioned.fill before. If this is breaking something,
-    //   // then we need to figure out a way to make it work with
-    //   // Positioned.fill and Positioned because Positioned.fill breaks
-    //   // shrink-wrapping.
-    //   return Positioned(child: child);
-    // }
-
     case PaintType.emoji:
       return const SizedBox.shrink();
   }

lib/src/transformers/passive_transformer_manager.dart

@@ -76,9 +76,6 @@ class PassiveNodeTransformerManager extends WidgetNodeTransformerManager {
         Widget widget =
             getTransformerByNode(node).buildWidget(node, context, settings);
 
-        if (settings.withBlendModes) {
-          widget = applyWidgetBlendMode(node, widget);
-        }
         if (settings.withOpacity) {
           widget = applyWidgetOpacity(node, widget);
         }

lib/src/transformers/utils/blend_mask.dart

@@ -32,7 +32,7 @@ class BlendMask extends SingleChildRenderObjectWidget {
   ///
   /// The [blendMode] argument must not be null.
   const BlendMask({
-    required this.blendMode,
+    this.blendMode = BlendMode.srcOver,
     super.key,
     super.child,
   });
@@ -87,7 +87,10 @@ class RenderBlendMask extends RenderProxyBox {
   @override
   void paint(PaintingContext context, Offset offset) {
     // Complex blend modes can be raster cached incorrectly on the Skia backend.
-    context.setWillChangeHint();
+    if (blendMode != BlendMode.srcOver) {
+      context.setWillChangeHint();
+    }
+
     context.canvas.saveLayer(offset & size, blender);
 
     super.paint(context, offset);

lib/src/transformers/widget_node_transformer_manager.dart

@@ -67,17 +67,6 @@ abstract class WidgetNodeTransformerManager extends NodeTransformerManager<
     );
   }
 
-  /// Applies a blending mask to the widget, which saves the widget's
-  /// rendered layer to the canvas, allowing other blend masks to be applied
-  /// on top of it.
-  Widget applyWidgetBlendMode(
-    BaseNode node,
-    Widget widget,) =>
-      BlendMask(
-        blendMode: BlendMode.srcOver,
-        child: widget,
-      );
-
   /// Convenience method to handle widget rotation.
   ///
   /// Takes into account margin and padding to figure out the origin of