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,
+    );
+  }
+}

lib/features/onboarding/widgets/onboarding_page.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'casha_shimmer_text.dart';
+import 'fade_slide_in.dart';
 
 class OnboardingPage extends StatelessWidget {
   final IconData? icon;
@@ -7,9 +8,13 @@ class OnboardingPage extends StatelessWidget {
   final String? description;
   final String? welcomeText;
   final bool isWelcomePage;
+  final bool isActive;
 
-  const OnboardingPage.welcome({required this.welcomeText, super.key})
-      : icon = null,
+  const OnboardingPage.welcome({
+    required this.welcomeText,
+    this.isActive = false,
+    super.key,
+  })  : icon = null,
         headline = null,
         description = null,
         isWelcomePage = true;
@@ -18,6 +23,7 @@ class OnboardingPage extends StatelessWidget {
     required this.icon,
     required this.headline,
     required this.description,
+    this.isActive = false,
     super.key,
   })  : welcomeText = null,
         isWelcomePage = false;
@@ -59,34 +65,45 @@ class OnboardingPage extends StatelessWidget {
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Container(
-              padding: const EdgeInsets.all(24),
-              decoration: BoxDecoration(
-                color: colorScheme.primary.withOpacity(0.12),
-                shape: BoxShape.circle,
-              ),
-              child: Icon(
-                icon,
-                size: 64,
-                color: colorScheme.primary,
+            FadeSlideIn(
+              active: isActive,
+              child: Container(
+                padding: const EdgeInsets.all(24),
+                decoration: BoxDecoration(
+                  color: colorScheme.primary.withOpacity(0.12),
+                  shape: BoxShape.circle,
+                ),
+                child: Icon(
+                  icon,
+                  size: 64,
+                  color: colorScheme.primary,
+                ),
               ),
             ),
             const SizedBox(height: 32),
-            Text(
-              headline!,
-              textAlign: TextAlign.center,
-              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
-                    fontWeight: FontWeight.bold,
-                    color: colorScheme.onSurface,
-                  ),
+            FadeSlideIn(
+              active: isActive,
+              delay: const Duration(milliseconds: 150),
+              child: Text(
+                headline!,
+                textAlign: TextAlign.center,
+                style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                      fontWeight: FontWeight.bold,
+                      color: colorScheme.onSurface,
+                    ),
+              ),
             ),
             const SizedBox(height: 12),
-            Text(
-              description!,
-              textAlign: TextAlign.center,
-              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    color: colorScheme.onSurface.withOpacity(0.6),
-                  ),
+            FadeSlideIn(
+              active: isActive,
+              delay: const Duration(milliseconds: 300),
+              child: Text(
+                description!,
+                textAlign: TextAlign.center,
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: colorScheme.onSurface.withOpacity(0.6),
+                    ),
+              ),
             ),
           ],
         ),