feat: for some effects the paths were drawn on top of the effect, fixed now.

Author: pavanpodila

packages/demo/lib/examples/advanced/animated_connections.dart

@@ -96,7 +96,7 @@ class AnimationDemoStore {
   set particleType(String value) =>
       runInAction(() => _particleType.value = value);
 
-  final Observable<String> _particleCharacter = Observable('●');
+  final Observable<String> _particleCharacter = Observable('📦');
 
   String get particleCharacter => _particleCharacter.value;
 

packages/vyuh_node_flow/lib/connections/animation/gradient_flow_effect.dart

@@ -119,25 +119,7 @@ class GradientFlowEffect implements ConnectionAnimationEffect {
         (i) => i / (gradientColors.length - 1),
       );
 
-      // Create linear gradient shader along the path segment
-      final shader = Gradient.linear(
-        startTangent.position,
-        endTangent.position,
-        gradientColors,
-        colorStops,
-      );
-
-      // Draw the gradient segment
-      final gradientPaint = Paint()
-        ..shader = shader
-        ..strokeWidth = basePaint.strokeWidth
-        ..style = PaintingStyle.stroke
-        ..strokeCap = basePaint.strokeCap
-        ..strokeJoin = basePaint.strokeJoin;
-
-      canvas.drawPath(gradientPath, gradientPaint);
-
-      // Draw the rest of the path with configured opacity
+      // Draw the rest of the path first (underneath) with configured opacity
       if (connectionOpacity > 0) {
         final basePaintWithOpacity = Paint()
           ..color = basePaint.color.withValues(alpha: connectionOpacity)
@@ -156,6 +138,24 @@ class GradientFlowEffect implements ConnectionAnimationEffect {
           canvas.drawPath(afterPath, basePaintWithOpacity);
         }
       }
+
+      // Create linear gradient shader along the path segment
+      final shader = Gradient.linear(
+        startTangent.position,
+        endTangent.position,
+        gradientColors,
+        colorStops,
+      );
+
+      // Draw the gradient segment on top
+      final gradientPaint = Paint()
+        ..shader = shader
+        ..strokeWidth = basePaint.strokeWidth
+        ..style = PaintingStyle.stroke
+        ..strokeCap = basePaint.strokeCap
+        ..strokeJoin = basePaint.strokeJoin;
+
+      canvas.drawPath(gradientPath, gradientPaint);
     }
   }
 }

packages/vyuh_node_flow/lib/connections/animation/particle_effect.dart

@@ -69,6 +69,19 @@ class ParticleEffect implements ConnectionAnimationEffect {
 
   @override
   void paint(Canvas canvas, Path path, Paint basePaint, double animationValue) {
+    // Draw the static path first (underneath the particles) with configured opacity
+    if (connectionOpacity > 0) {
+      final pathPaint = Paint()
+        ..color = basePaint.color.withValues(alpha: connectionOpacity)
+        ..strokeWidth = basePaint.strokeWidth
+        ..style = PaintingStyle.stroke
+        ..strokeCap = basePaint.strokeCap
+        ..strokeJoin = basePaint.strokeJoin;
+
+      canvas.drawPath(path, pathPaint);
+    }
+
+    // Draw particles on top
     final pathMetrics = path.computeMetrics();
 
     for (final metric in pathMetrics) {
@@ -91,17 +104,5 @@ class ParticleEffect implements ConnectionAnimationEffect {
         particlePainter.paint(canvas, tangent.position, tangent, basePaint);
       }
     }
-
-    // Draw the static path underneath the particles with configured opacity
-    if (connectionOpacity > 0) {
-      final pathPaint = Paint()
-        ..color = basePaint.color.withValues(alpha: connectionOpacity)
-        ..strokeWidth = basePaint.strokeWidth
-        ..style = PaintingStyle.stroke
-        ..strokeCap = basePaint.strokeCap
-        ..strokeJoin = basePaint.strokeJoin;
-
-      canvas.drawPath(path, pathPaint);
-    }
   }
 }