kasy-cli 1.21.9 → 1.23.0

package/templates/firebase/lib/features/onboarding/ui/widgets/onboarding_illustration_scaffold.dart

@@ -1,34 +1,37 @@
 import 'package:flutter/material.dart';
-import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:kasy_kit/core/animations/movefade_anim.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_progress.dart';
+import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_step_header.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_sticky_footer.dart';
 
-/// Layout compartilhado para passos de onboarding com ilustração e ações no rodapé.
-///
-/// Evita buracos grandes de [Expanded] + [Spacer] com imagens [BoxFit.contain].
+/// Shared "clean premium" layout for onboarding steps:
+/// segmented progress + step counter on top, a centered hero (live module
+/// mockup) filling the upper area, then a left‑aligned title/description block
+/// sitting just above a sticky footer with the primary actions.
 class OnboardingIllustrationScaffold extends StatelessWidget {
   const OnboardingIllustrationScaffold({
     super.key,
-    required this.progress,
+    required this.step,
     required this.title,
     required this.description,
     required this.footerActions,
-    this.imageAsset,
+    this.totalSteps = kOnboardingSteps,
     this.image,
-    this.imageMaxHeight = 280,
+    this.imageMaxHeight = 320,
     this.titleWidget,
     this.descriptionWidget,
-    this.footerAnimationDelayMs = 400,
+    this.footerAnimationDelayMs = 360,
     this.animateFooter = true,
     this.onSkip,
     this.skipLabel,
   });
 
-  final double progress;
+  final int step;
+  final int totalSteps;
   final String title;
   final String description;
-  final String? imageAsset;
   final Widget? image;
   final List<Widget> footerActions;
   final double imageMaxHeight;
@@ -39,12 +42,82 @@ class OnboardingIllustrationScaffold extends StatelessWidget {
   final VoidCallback? onSkip;
   final String? skipLabel;
 
+  static const double _gutter = KasySpacing.lg;
+
   @override
   Widget build(BuildContext context) {
-    final Widget? illustration = image ??
-        (imageAsset != null && imageAsset!.isNotEmpty
-            ? Image.asset(imageAsset!, fit: BoxFit.contain)
-            : null);
+    final colors = context.colors;
+
+    final Widget header = OnboardingStepHeader(
+      step: step,
+      totalSteps: totalSteps,
+      onSkip: onSkip,
+      skipLabel: skipLabel,
+    );
+
+    final Widget hero = image == null
+        ? const SizedBox.shrink()
+        : Padding(
+            padding: const EdgeInsets.symmetric(horizontal: _gutter),
+            child: Center(
+              // Scales the mockup to fit the available space (never upscales
+              // beyond its natural size). No fixed height cap, so a tall mockup
+              // never overflows its own box.
+              child: FittedBox(
+                fit: BoxFit.scaleDown,
+                child: image!
+                    .animate()
+                    .fadeIn(
+                      delay: const Duration(milliseconds: 80),
+                      duration: const Duration(milliseconds: 360),
+                    )
+                    .scaleXY(
+                      begin: 0.92,
+                      end: 1,
+                      delay: const Duration(milliseconds: 80),
+                      duration: const Duration(milliseconds: 520),
+                      curve: Curves.easeOutBack,
+                    ),
+              ),
+            ),
+          );
+
+    final Widget textBlock = Padding(
+      padding: const EdgeInsets.fromLTRB(_gutter, KasySpacing.md, _gutter, 0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          titleWidget ??
+              MoveFadeAnim(
+                delayInMs: 180,
+                child: Text(
+                  title,
+                  textAlign: TextAlign.start,
+                  style: context.textTheme.headlineMedium?.copyWith(
+                    color: colors.onBackground,
+                    fontSize: 28,
+                    fontWeight: FontWeight.w700,
+                    letterSpacing: -0.3,
+                    height: 1.2,
+                  ),
+                ),
+              ),
+          const SizedBox(height: KasySpacing.smd),
+          descriptionWidget ??
+              MoveFadeAnim(
+                delayInMs: 260,
+                child: Text(
+                  description,
+                  textAlign: TextAlign.start,
+                  style: context.textTheme.bodyLarge?.copyWith(
+                    color: colors.muted,
+                    height: 1.45,
+                  ),
+                ),
+              ),
+        ],
+      ),
+    );
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -52,71 +125,33 @@ class OnboardingIllustrationScaffold extends StatelessWidget {
         Expanded(
           child: SafeArea(
             bottom: false,
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                if (onSkip != null)
-                  Align(
-                    alignment: Alignment.centerRight,
-                    child: KasyButton(
-                      label: skipLabel ?? 'Skip',
-                      variant: KasyButtonVariant.ghost,
-                      size: KasyButtonSize.small,
-                      onPressed: onSkip,
-                    ),
-                  ),
-                OnboardingProgress(value: progress),
-                Expanded(
-                  child: SingleChildScrollView(
-                    padding: const EdgeInsets.fromLTRB(
-                      KasySpacing.xl,
-                      KasySpacing.lg,
-                      KasySpacing.xl,
-                      KasySpacing.md,
-                    ),
-                    child: Column(
-                      children: [
-                        titleWidget ??
-                            Text(
-                              title,
-                              textAlign: TextAlign.center,
-                              style:
-                                  context.textTheme.headlineMedium?.copyWith(
-                                color: context.colors.onBackground,
-                                fontWeight: FontWeight.w600,
-                              ),
-                            ),
-                        const SizedBox(height: KasySpacing.smd),
-                        descriptionWidget ??
-                            Text(
-                              description,
-                              textAlign: TextAlign.center,
-                              style: context.textTheme.bodyLarge?.copyWith(
-                                color: context.colors.onBackground.withValues(
-                                  alpha: 0.6,
-                                ),
-                              ),
-                            ),
-                        if (illustration != null) ...[
-                          const SizedBox(height: KasySpacing.xl),
-                          ConstrainedBox(
-                            constraints:
-                                BoxConstraints(maxHeight: imageMaxHeight),
-                            child: illustration,
-                          ),
+            // Fill the screen on tall devices (hero centered), but scroll
+            // gracefully on short ones instead of overflowing.
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                return SingleChildScrollView(
+                  child: ConstrainedBox(
+                    constraints: BoxConstraints(minHeight: constraints.maxHeight),
+                    child: IntrinsicHeight(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
+                        children: [
+                          header,
+                          Expanded(child: Center(child: hero)),
+                          textBlock,
+                          const SizedBox(height: KasySpacing.sm),
                         ],
-                      ],
+                      ),
                     ),
                   ),
-                ),
-              ],
+                );
+              },
             ),
           ),
         ),
         OnboardingStickyFooter(
           animate: animateFooter,
           animationDelayMs: footerAnimationDelayMs,
-          horizontalPadding: KasySpacing.xl,
           children: footerActions,
         ),
       ],