Image fills apply their opacity once

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UErtKMSFkZWHUh8DrQMcZW

Author: claude

lib/src/transformers/node_transformers/passive_rectangle_transformer.dart

@@ -807,6 +807,7 @@ Widget buildFill(
             node: node,
             bytes: bytes,
             useInk: useInk,
+            applyPaintOpacity: false,
           );
         }
       }

lib/src/utils/image_builder.dart

@@ -25,6 +25,11 @@ class UltimateImageBuilder extends StatefulWidget {
   final BlendMode? blendMode;
   final bool useInk;
 
+  /// Whether to paint the image at [paint]'s opacity. Off when the caller
+  /// applies the opacity itself, like an image fill, which wraps every kind
+  /// of image (network, bytes, SVG) in one [Opacity].
+  final bool applyPaintOpacity;
+
   const UltimateImageBuilder({
     super.key,
     this.url,
@@ -42,6 +47,7 @@ class UltimateImageBuilder extends StatefulWidget {
     this.node,
     this.blendMode,
     this.useInk = false,
+    this.applyPaintOpacity = true,
   }) : assert(
          url != null || bytes != null || paint != null,
          'url or bytes or paint must be provided',
@@ -259,7 +265,9 @@ class _UltimateImageBuilderState extends State<UltimateImageBuilder> {
         repeat: repeat,
         scale: scale,
         color: widget.color,
-        opacity: AlwaysStoppedAnimation(widget.paint?.opacity ?? 1),
+        opacity: AlwaysStoppedAnimation(
+          widget.applyPaintOpacity ? widget.paint?.opacity ?? 1 : 1,
+        ),
         filterQuality: FilterQuality.medium,
         colorBlendMode: colorBlendMode,
         // On the web, hosts that don't allow cross-origin reads (no CORS

test/image_fill_opacity_test.dart

@@ -0,0 +1,44 @@
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:codelessly_sdk/codelessly_sdk.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  // An image fill at 35% opacity painted at about 12%: the fill wrapped the
+  // image in an Opacity and the network image applied the opacity again.
+  testWidgets('an image fill applies its opacity once', (tester) async {
+    final RectangleNode node = RectangleNode(
+      id: 'paper',
+      name: 'Paper',
+      basicBoxLocal: NodeBox(0, 0, 100, 100),
+      fills: [
+        PaintModel(
+          id: 'topo',
+          type: PaintType.image,
+          downloadUrl: 'https://example.com/topo.png',
+          opacity: 0.35,
+          fit: Fit.cover,
+        ),
+      ],
+    );
+    await tester.pumpWidget(
+      Directionality(
+        textDirection: TextDirection.ltr,
+        child: buildFill(
+          node,
+          index: 0,
+          useInk: false,
+          settings: const WidgetBuildSettings(debugLabel: 'test'),
+          scopedValues: ScopedValues.empty(),
+        ),
+      ),
+    );
+    final double opacity = tester
+        .widgetList<Opacity>(find.byType(Opacity))
+        .fold(1.0, (value, widget) => value * widget.opacity);
+    final double imageOpacity = tester
+        .widgetList<Image>(find.byType(Image))
+        .fold(1.0, (value, widget) => value * (widget.opacity?.value ?? 1));
+    expect(opacity * imageOpacity, closeTo(0.35, 0.001));
+  });
+}