Animate bound opacity changes of nodes with a transition

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

Author: claude

lib/src/transformers/widget_node_transformer_manager.dart

@@ -51,9 +51,18 @@ abstract class WidgetNodeTransformerManager
 
   /// Convenience method to handle widget opacity.
   Widget applyWidgetOpacity(BaseNode node, Widget widget) {
-    if (node is! BlendMixin || node.opacity > 0.99) {
-      return widget;
+    if (node is! BlendMixin) return widget;
+    // A node with a transition always has the animated wrapper, so a change
+    // of its opacity (to fully opaque too) tweens instead of jumping.
+    if (node.transition case final NodeTransition transition?) {
+      return AnimatedOpacity(
+        opacity: node.opacity.clamp(0.0, 1.0),
+        duration: transition.duration,
+        curve: transition.curve.flutterCurve,
+        child: widget,
+      );
     }
+    if (node.opacity > 0.99) return widget;
 
     final double opacity = node.opacity < 0.99 ? node.opacity : 1;
     return Opacity(opacity: opacity, child: widget);

lib/src/utils/extensions.dart

@@ -2306,3 +2306,14 @@ extension TextInputActionCExt on TextInputActionC {
     TextInputActionC.newline => TextInputAction.newline,
   };
 }
+
+extension TransitionCurveExt on TransitionCurve {
+  /// The Flutter [Curve] for this easing.
+  Curve get flutterCurve => switch (this) {
+    TransitionCurve.linear => Curves.linear,
+    TransitionCurve.easeIn => Curves.easeIn,
+    TransitionCurve.easeOut => Curves.easeOut,
+    TransitionCurve.easeInOut => Curves.easeInOut,
+    TransitionCurve.easeOutCubic => Curves.easeOutCubic,
+  };
+}

test/node_transition_test.dart

@@ -0,0 +1,81 @@
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:codelessly_sdk/codelessly_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'feedback_actions_test.dart'
+    show body, brandRegular, button, canvas, layoutOf, pumpLayouts, text;
+
+final VariableData bright = VariableData(
+  id: 'bright',
+  name: 'bright',
+  value: true,
+  type: VariableType.boolean,
+);
+
+TextNode pulse({NodeTransition? transition}) =>
+    text('pulse', 'mainBody', 'Loading', brandRegular)
+      ..variables['opacity'] = r'${= if(bright, 1, 0.45)}'
+      ..transition = transition;
+
+Future<void> pumpScreen(WidgetTester tester, {NodeTransition? transition}) =>
+    pumpLayouts(
+      tester,
+      [
+        layoutOf('layout', [
+          canvas('main', 'mainBody'),
+          body('mainBody', 'main', ['pulse', 'dim']),
+          pulse(transition: transition),
+          button(
+            'dim',
+            'mainBody',
+            'Dim',
+            SetVariableAction(variable: bright, toggled: true),
+          ),
+        ]),
+      ],
+      variables: {
+        'main': {bright.id: bright},
+      },
+    );
+
+double renderedOpacity(WidgetTester tester) {
+  final Iterable<FadeTransition> fades = tester.widgetList<FadeTransition>(
+    find.ancestor(of: find.text('Loading'), matching: find.byType(FadeTransition)),
+  );
+  return fades.first.opacity.value;
+}
+
+void main() {
+  testWidgets('a node with a transition tweens a bound opacity', (
+    tester,
+  ) async {
+    await pumpScreen(
+      tester,
+      transition: const NodeTransition(
+        durationMillis: 1000,
+        curve: TransitionCurve.linear,
+      ),
+    );
+    expect(renderedOpacity(tester), 1);
+
+    await tester.tap(find.text('Dim'));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+    expect(renderedOpacity(tester), closeTo(0.725, 0.02));
+
+    await tester.pump(const Duration(milliseconds: 600));
+    expect(renderedOpacity(tester), closeTo(0.45, 0.001));
+  });
+
+  testWidgets('without a transition a bound opacity jumps', (tester) async {
+    await pumpScreen(tester);
+    expect(find.byType(AnimatedOpacity), findsNothing);
+    await tester.tap(find.text('Dim'));
+    await tester.pump();
+    final Opacity opacity = tester.widget<Opacity>(
+      find.ancestor(of: find.text('Loading'), matching: find.byType(Opacity)).first,
+    );
+    expect(opacity.opacity, 0.45);
+  });
+}