step

lib/features/onboarding/widgets/fade_slide_in.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+
+class FadeSlideIn extends StatefulWidget {
+  final bool active;
+  final Duration delay;
+  final Duration duration;
+  final Widget child;
+
+  const FadeSlideIn({
+    required this.active,
+    required this.child,
+    this.delay = Duration.zero,
+    this.duration = const Duration(milliseconds: 500),
+    super.key,
+  });
+
+  @override
+  State<FadeSlideIn> createState() => _FadeSlideInState();
+}
+
+class _FadeSlideInState extends State<FadeSlideIn>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final Animation<double> _opacity;
+  late final Animation<Offset> _offset;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: widget.duration,
+    );
+    _opacity = Tween<double>(begin: 0.0, end: 1.0).animate(
+      CurvedAnimation(parent: _controller, curve: Curves.easeOut),
+    );
+    _offset = Tween<Offset>(
+      begin: const Offset(0, 0.15),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
+  }
+
+  @override
+  void didUpdateWidget(covariant FadeSlideIn oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.active && !oldWidget.active) {
+      _controller.reset();
+      Future.delayed(widget.delay, () {
+        if (mounted) _controller.forward();
+      });
+    } else if (!widget.active && oldWidget.active) {
+      _controller.reset();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        return Opacity(
+          opacity: _opacity.value,
+          child: FractionalTranslation(
+            translation: _offset.value,
+            child: child,
+          ),
+        );
+      },
+      child: widget.child,
+    );
+  }
+}