AnimatedSlot<T> constructor

const AnimatedSlot<T>({
  1. Key? key,
  2. required Signal<T> connect,
  3. required Widget to(
    1. BuildContext context,
    2. T value
    ),
  4. Duration duration = const Duration(milliseconds: 300),
  5. Curve curve = Curves.easeInOut,
  6. Curve? exitCurve,
  7. SlotEffect effect = SlotEffect.fade,
  8. DirectionalEffect? directionalEffect,
  9. Duration delay = Duration.zero,
  10. VoidCallback? onAnimationStart,
  11. VoidCallback? onAnimationComplete,
  12. Widget? child,
  13. double scaleBegin = 0.8,
  14. double scaleEnd = 1.0,
  15. Offset slideOffset = const Offset(0, 0.3),
  16. double rotationTurns = 0.25,
  17. double blurSigma = 5.0,
  18. bool clipBehavior = false,
})

Creates an AnimatedSlot that smoothly animates between value changes.

Basic Usage

AnimatedSlot<int>(
  connect: controller.counter,
  to: (ctx, val) => Text('$val'),
)

With Effects

AnimatedSlot<int>(
  connect: controller.counter,
  effect: SlotEffect.fadeScale | SlotEffect.blur,
  duration: Duration(milliseconds: 400),
  curve: Curves.elasticOut,
  to: (ctx, val) => Text('$val', style: TextStyle(fontSize: 48)),
)

Direction-Aware

AnimatedSlot<int>(
  connect: controller.counter,
  directionalEffect: DirectionalEffect.vertical,  // slides up/down
  to: (ctx, val) => Text('$val'),
)

Implementation

const AnimatedSlot({
  super.key,
  required this.connect,
  required this.to,
  this.duration = const Duration(milliseconds: 300),
  this.curve = Curves.easeInOut,
  this.exitCurve,
  this.effect = SlotEffect.fade,
  this.directionalEffect,
  this.delay = Duration.zero,
  this.onAnimationStart,
  this.onAnimationComplete,
  this.child,
  // Enhanced defaults
  this.scaleBegin = 0.8,
  this.scaleEnd = 1.0,
  this.slideOffset = const Offset(0, 0.3),
  this.rotationTurns = 0.25,
  this.blurSigma = 5.0,
  this.clipBehavior = false,
});