Blend Modes #5

Author: SaadArdati

lib/codelessly_sdk.dart

@@ -25,6 +25,7 @@ export 'src/model/privacy_base.dart';
 export 'src/model/publish_source.dart';
 export 'src/model/sdk_publish_model.dart';
 export 'src/transformers/transformers.dart';
+export 'src/transformers/utils/blend_mask.dart';
 export 'src/ui/codelessly_context.dart';
 export 'src/ui/codelessly_widget.dart';
 export 'src/ui/codelessly_widget_controller.dart';

lib/src/transformers/node_transformers/passive_rectangle_transformer.dart

@@ -1,10 +1,8 @@
 import 'dart:math' hide log;
-import 'dart:ui' as ui;
 
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:vector_math/vector_math_64.dart' as vec_math;
 
 import '../../../codelessly_sdk.dart';
@@ -580,7 +578,7 @@ List<Widget> buildFills(
   for (final model in node.fills.reversed) {
     final index = node.fills.indexOf(model);
     if (!model.visible) continue;
-    if (model.blendMode != BlendModeC.srcOver) {
+    if (settings.withBlendModes && model.blendMode != BlendModeC.srcOver) {
       lastBlendTree.add(model);
       continue;
     }
@@ -608,9 +606,9 @@ List<Widget> buildFills(
           for (final paint in lastBlendTree.reversed)
             if (paint.visible)
               Positioned.fill(
-                child: PaintBlendMask(
-                  model: paint,
-                  image: null,
+                child: BlendMask(
+                  key: ObjectKey(paint.blendMode),
+                  blendMode: paint.blendMode.flutterBlendMode,
                   child: buildFill(
                     node,
                     index: node.fills.indexOf(paint),
@@ -827,129 +825,3 @@ class RelativeTransform {
         skew: skew ?? this.skew,
       );
 }
-
-class BlendMask extends SingleChildRenderObjectWidget {
-  final List<BlendMode> blendModes;
-  final double opacity;
-
-  const BlendMask({
-    required this.blendModes,
-    this.opacity = 1.0,
-    super.key,
-    required Widget super.child,
-  });
-
-  @override
-  RenderObject createRenderObject(context) =>
-      RenderBlendMask(blendModes, opacity);
-
-  @override
-  void updateRenderObject(BuildContext context, RenderBlendMask renderObject) {
-    renderObject.blendModes = blendModes;
-    renderObject.opacity = opacity;
-  }
-}
-
-class RenderBlendMask extends RenderProxyBox {
-  List<BlendMode> blendModes;
-  double opacity;
-
-  RenderBlendMask(this.blendModes, this.opacity);
-
-  @override
-  void paint(context, offset) {
-    // Complex blend modes can be raster cached incorrectly on the Skia backend.
-    // context.setWillChangeHint();
-    for (var blend in blendModes) {
-      context.canvas.saveLayer(
-        offset & size,
-        Paint()
-          ..blendMode = blend
-          ..color = Color.fromARGB((opacity * 255).round(), 255, 255, 255),
-      );
-    }
-    super.paint(context, offset);
-    context.canvas.restore();
-  }
-}
-
-class PaintBlendMask extends SingleChildRenderObjectWidget {
-  final PaintModel _model;
-  final ui.Image? _image;
-
-  const PaintBlendMask({
-    required PaintModel model,
-    ui.Image? image,
-    super.key,
-    super.child,
-  })  : _model = model,
-        _image = image;
-
-  @override
-  RenderObject createRenderObject(context) {
-    return RenderPaintBlendMask(_model, _image);
-  }
-
-  @override
-  void updateRenderObject(
-      BuildContext context, RenderPaintBlendMask renderObject) {
-    renderObject._model = _model;
-    renderObject._image = _image;
-  }
-}
-
-class RenderPaintBlendMask extends RenderProxyBox {
-  PaintModel _model;
-  ui.Image? _image;
-
-  RenderPaintBlendMask(PaintModel model, ui.Image? image)
-      : _model = model,
-        _image = image;
-
-  Paint makePaint(Rect bounds) {
-    Paint paint = Paint()..blendMode = _model.blendMode.flutterBlendMode;
-
-    switch (_model.type) {
-      case PaintType.solid:
-        Color? color = _model.toFlutterColor();
-        if (color != null) {
-          paint.color = color;
-        }
-      case PaintType.gradientLinear:
-      case PaintType.gradientRadial:
-      case PaintType.gradientAngular:
-      case PaintType.gradientDiamond:
-        paint.shader = retrieveGradient(_model)?.createShader(bounds);
-      case PaintType.image:
-        if (_image case ui.Image image) {
-          paint.shader = ImageShader(
-            image,
-            TileMode.clamp,
-            TileMode.clamp,
-            Matrix4.identity().storage,
-          );
-        }
-      case PaintType.emoji:
-        break;
-    }
-
-    return paint;
-  }
-
-  @override
-  void paint(context, offset) {
-    // Complex blend modes can be raster cached incorrectly on the Skia backend.
-    // context.setWillChangeHint();
-    context.canvas.saveLayer(
-      offset & size,
-      // makePaint(offset & size),
-      Paint()
-        ..blendMode = _model.blendMode.flutterBlendMode
-        ..color = Colors.white,
-    );
-
-    super.paint(context, offset);
-
-    context.canvas.restore();
-  }
-}

lib/src/transformers/utils/blend_mask.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+
+/// A widget that applies a [BlendMode] to its child.
+///
+/// The [BlendMask] widget uses a [RenderBlendMask] to apply the specified
+/// [blendMode] to its child widget during the paint phase. This can be used to
+/// blend the child widget with the background or to create various visual
+/// effects.
+///
+/// {@tool snippet}
+/// This example shows how to use the [BlendMask] widget to apply a
+/// [BlendMode.multiply] effect to an image.
+///
+/// ```dart
+/// BlendMask(
+///   blendMode: BlendMode.multiply,
+///   child: Image.asset('assets/my_image.png'),
+/// );
+/// ```
+/// {@end-tool}
+///
+/// See also:
+///
+///  * [BlendMode], which describes the different ways to blend a source image
+///    with the destination image.
+class BlendMask extends SingleChildRenderObjectWidget {
+  /// The blend mode to apply to the child widget.
+  final BlendMode blendMode;
+
+  /// Creates a widget that blends its child using the given [blendMode].
+  ///
+  /// The [blendMode] argument must not be null.
+  const BlendMask({
+    required this.blendMode,
+    super.key,
+    super.child,
+  });
+
+  @override
+  RenderObject createRenderObject(BuildContext context) {
+    return RenderBlendMask(blendMode);
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, RenderBlendMask renderObject) {
+    renderObject.blendMode = blendMode;
+  }
+}
+
+/// A render object that applies a [BlendMode] to its child during painting.
+///
+/// The [RenderBlendMask] uses a [Paint] object with the specified [blendMode]
+/// and applies it to the child by saving a layer with that paint during the
+/// paint phase.
+///
+/// This render object is typically used by the [BlendMask] widget.
+class RenderBlendMask extends RenderProxyBox {
+  BlendMode _blendMode;
+
+  /// The blend mode to apply to the child during painting.
+  ///
+  /// Changing this value will cause the render object to repaint.
+  BlendMode get blendMode => _blendMode;
+
+  set blendMode(BlendMode value) {
+    if (_blendMode == value) return;
+    _blendMode = value;
+    blender.blendMode = _blendMode;
+    markNeedsPaint();
+  }
+
+  /// The [Paint] object used to blend the child.
+  ///
+  /// It is initialized with the [_blendMode] and a white color.
+  final Paint blender;
+
+  /// Creates a [RenderBlendMask] with the given [blendMode].
+  ///
+  /// The [blendMode] must not be null.
+  RenderBlendMask(BlendMode blendMode)
+      : _blendMode = blendMode,
+        blender = Paint()
+          ..blendMode = blendMode
+          ..color = Colors.white;
+
+  @override
+  void paint(PaintingContext context, Offset offset) {
+    // Complex blend modes can be raster cached incorrectly on the Skia backend.
+    context.setWillChangeHint();
+    context.canvas.saveLayer(offset & size, blender);
+
+    super.paint(context, offset);
+
+    context.canvas.restore();
+  }
+}

lib/src/transformers/widget_node_transformer_manager.dart

@@ -67,15 +67,16 @@ 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,
-  ) {
-    return BlendMask(
-      blendModes: [BlendMode.srcOver],
-      child: widget,
-    );
-  }
+    Widget widget,) =>
+      BlendMask(
+        blendMode: BlendMode.srcOver,
+        child: widget,
+      );
 
   /// Convenience method to handle widget rotation.
   ///