kasy-cli 1.21.9 → 1.23.0

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

@@ -1,10 +1,25 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 
+/// Total number of progress steps shown across the onboarding flow.
+///
+/// feature 1‑3 → steps 1‑3, gender → 4, age → 5, permissions → 6.
+const int kOnboardingSteps = 6;
+
+/// Segmented progress indicator (one pill per step).
+///
+/// Completed steps are fully filled; the current step animates its fill from
+/// left to right on mount; upcoming steps render as a faded track.
 class OnboardingProgress extends StatefulWidget {
-  final double value;
+  /// 1‑based index of the current step.
+  final int step;
+  final int totalSteps;
 
-  const OnboardingProgress({super.key, required this.value});
+  const OnboardingProgress({
+    super.key,
+    required this.step,
+    this.totalSteps = kOnboardingSteps,
+  });
 
   @override
   State<OnboardingProgress> createState() => _OnboardingProgressState();
@@ -12,73 +27,70 @@ class OnboardingProgress extends StatefulWidget {
 
 class _OnboardingProgressState extends State<OnboardingProgress>
     with SingleTickerProviderStateMixin {
-  late final AnimationController animationController;
-
-  late Animation<double> _progressAnimation;
+  late final AnimationController _controller;
+  late final Animation<double> _fill;
 
   @override
   void initState() {
     super.initState();
-
-    animationController = AnimationController(
+    _controller = AnimationController(
       vsync: this,
-      duration: const Duration(milliseconds: 1500),
+      duration: const Duration(milliseconds: 650),
     );
-    _setProgressValueAndStart();
-  }
-
-  @override
-  void didUpdateWidget(OnboardingProgress oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.value != widget.value) {
-      _setProgressValueAndStart();
-    }
+    _fill = CurvedAnimation(parent: _controller, curve: Curves.easeOutCubic);
+    _controller.forward();
   }
 
   @override
   void dispose() {
-    animationController.dispose();
+    _controller.dispose();
     super.dispose();
   }
 
-  void _setProgressValueAndStart() {
-    var start = 0.0;
-    if (widget.value > 0) {
-      start = widget.value - 0.1;
-    }
-    _progressAnimation = Tween<double>(
-      begin: start,
-      end: widget.value,
-    ).animate(
-      CurvedAnimation(
-        parent: animationController,
-        curve: Curves.ease,
-      ),
-    );
-    animationController.forward(from: 0);
-  }
-
   @override
   Widget build(BuildContext context) {
-    return AnimatedBuilder(
-      animation: _progressAnimation,
-      builder: (context, child) {
-        return Padding(
-          // Intentionally narrow (80px lateral) — visual design choice for progress bar
-          padding: const EdgeInsets.fromLTRB(80, KasySpacing.md, 80, 0),
-          child: ClipRRect(
-            borderRadius: KasyRadius.fullBorderRadius,
-            child: LinearProgressIndicator(
-              value: _progressAnimation.value,
-              minHeight: 16,
-              valueColor: AlwaysStoppedAnimation<Color>(
-                context.colors.primary,
+    final colors = context.colors;
+    final track = colors.primary.withValues(alpha: context.isDark ? 0.18 : 0.12);
+    final current = widget.step - 1; // 0‑based
+
+    return Row(
+      children: List.generate(widget.totalSteps, (i) {
+        final isLast = i == widget.totalSteps - 1;
+        final isCompleted = i < current;
+        final isCurrent = i == current;
+
+        return Expanded(
+          child: Padding(
+            padding: EdgeInsets.only(right: isLast ? 0 : KasySpacing.sm),
+            child: ClipRRect(
+              borderRadius: KasyRadius.fullBorderRadius,
+              child: SizedBox(
+                height: 6,
+                child: Stack(
+                  children: [
+                    Positioned.fill(child: ColoredBox(color: track)),
+                    if (isCompleted)
+                      Positioned.fill(
+                        child: ColoredBox(color: colors.primary),
+                      ),
+                    if (isCurrent)
+                      Positioned.fill(
+                        child: AnimatedBuilder(
+                          animation: _fill,
+                          builder: (context, _) => FractionallySizedBox(
+                            alignment: Alignment.centerLeft,
+                            widthFactor: _fill.value,
+                            child: ColoredBox(color: colors.primary),
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
               ),
-              backgroundColor: context.colors.primary.withValues(alpha: 0.1),
             ),
           ),
         );
-      },
+      }),
     );
   }
 }

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

@@ -7,6 +7,7 @@ import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_background.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';
 import 'package:kasy_kit/features/onboarding/ui/widgets/selectable_row_tile.dart';
 
@@ -18,9 +19,11 @@ typedef OnOptionIdSelected = void Function(String id);
 
 typedef OnValidate = void Function(String? key);
 
-/// Single choice question with radio buttons
+/// Single choice question with selectable tiles, matching the clean‑premium
+/// onboarding layout (shared header, left‑aligned title, sticky footer).
 class OnboardingRadioQuestion extends ConsumerStatefulWidget {
-  final double? progress;
+  final int step;
+  final int totalSteps;
   final String title;
   final String description;
   final String btnText;
@@ -37,7 +40,8 @@ class OnboardingRadioQuestion extends ConsumerStatefulWidget {
     required this.btnText,
     required this.optionIds,
     required this.optionBuilder,
-    this.progress,
+    required this.step,
+    this.totalSteps = kOnboardingSteps,
     this.onOptionIdSelected,
     this.onValidate,
     this.reassuranceBuilder,
@@ -54,61 +58,68 @@ class _OnboardingRadioQuestionState
 
   @override
   Widget build(BuildContext context) {
+    const gutter = KasySpacing.lg;
+
     final scrollBody = Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        if (widget.progress != null)
-          OnboardingProgress(value: widget.progress!),
+        OnboardingStepHeader(step: widget.step, totalSteps: widget.totalSteps),
         Padding(
-          padding: const EdgeInsets.fromLTRB(
-            KasySpacing.md,
-            KasySpacing.xl,
-            KasySpacing.md,
-            0,
-          ),
+          padding: const EdgeInsets.fromLTRB(gutter, KasySpacing.lg, gutter, 0),
           child: MoveFadeAnim(
-            delayInMs: 100,
+            delayInMs: 120,
             child: Text(
               widget.title,
-              textAlign: TextAlign.center,
-              style: context.textTheme.headlineLarge?.copyWith(
+              textAlign: TextAlign.start,
+              style: context.textTheme.headlineMedium?.copyWith(
                 color: context.colors.onBackground,
+                fontSize: 26,
+                fontWeight: FontWeight.w700,
+                letterSpacing: -0.2,
+                height: 1.2,
               ),
             ),
           ),
         ),
         Padding(
           padding: const EdgeInsets.fromLTRB(
+            gutter,
+            KasySpacing.smd,
+            gutter,
             KasySpacing.lg,
-            KasySpacing.md,
-            KasySpacing.lg,
-            KasySpacing.xl,
           ),
           child: MoveFadeAnim(
             delayInMs: 200,
             child: Text(
               widget.description,
-              textAlign: TextAlign.center,
+              textAlign: TextAlign.start,
               style: context.textTheme.bodyLarge?.copyWith(
-                color: context.colors.onBackground.withValues(alpha: 0.6),
+                color: context.colors.muted,
+                height: 1.45,
               ),
             ),
           ),
         ),
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+          padding: const EdgeInsets.symmetric(horizontal: gutter),
           child: OnboardingSelectableRowGroup(
             physics: const NeverScrollableScrollPhysics(),
-            options: widget.optionIds
-                .map(
+            options: widget.optionIds.map(
               (e) {
                 final index = widget.optionIds.indexOf(e);
                 return Animate(
                   effects: [
                     FadeEffect(
-                      delay: Duration(milliseconds: 300 + index * 100),
-                      duration: const Duration(milliseconds: 550),
-                      curve: Curves.easeInOut,
+                      delay: Duration(milliseconds: 280 + index * 80),
+                      duration: const Duration(milliseconds: 450),
+                      curve: Curves.easeOut,
+                    ),
+                    MoveEffect(
+                      delay: Duration(milliseconds: 280 + index * 80),
+                      duration: const Duration(milliseconds: 450),
+                      curve: Curves.easeOut,
+                      begin: const Offset(0, 24),
+                      end: Offset.zero,
                     ),
                   ],
                   child: widget.optionBuilder(e, e == selectedChoiceId),
@@ -153,8 +164,7 @@ class _OnboardingRadioQuestionState
           ),
           DeviceSizeBuilder(
             builder: (device) => OnboardingStickyFooter(
-              maxContentWidth:
-                  device == DeviceType.small ? null : 600,
+              maxContentWidth: device == DeviceType.small ? null : 600,
               children: [
                 KasyButton(
                   label: widget.btnText,

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

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_brand_logo.dart';
+import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_progress.dart';
+
+/// Shared onboarding header: segmented progress + a zero‑padded "01 / 06"
+/// counter, with an optional trailing Skip action. Keeps every step pixel
+/// consistent.
+class OnboardingStepHeader extends StatelessWidget {
+  const OnboardingStepHeader({
+    super.key,
+    required this.step,
+    this.totalSteps = kOnboardingSteps,
+    this.onSkip,
+    this.skipLabel,
+    this.horizontalPadding = KasySpacing.lg,
+  });
+
+  final int step;
+  final int totalSteps;
+  final VoidCallback? onSkip;
+  final String? skipLabel;
+  final double horizontalPadding;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+        horizontalPadding,
+        KasySpacing.md,
+        horizontalPadding,
+        0,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Center(
+            child: const KasyBrandLogo()
+                .animate()
+                .fadeIn(
+                  duration: const Duration(milliseconds: 420),
+                  curve: Curves.easeOut,
+                ),
+          ),
+          const SizedBox(height: KasySpacing.md),
+          OnboardingProgress(step: step, totalSteps: totalSteps),
+          const SizedBox(height: KasySpacing.smd),
+          Row(
+            children: [
+              Text(
+                '${step.toString().padLeft(2, '0')} / '
+                '${totalSteps.toString().padLeft(2, '0')}',
+                style: context.textTheme.labelMedium?.copyWith(
+                  color: context.colors.muted,
+                  fontWeight: FontWeight.w700,
+                  letterSpacing: 1,
+                ),
+              ),
+              const Spacer(),
+              if (onSkip != null)
+                KasyButton(
+                  label: skipLabel ?? 'Skip',
+                  variant: KasyButtonVariant.ghost,
+                  size: KasyButtonSize.small,
+                  onPressed: onSkip,
+                ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/animations/movefade_anim.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 
-/// Rodapé fixo do onboarding: fundo até a borda inferior + animação de entrada.
+/// Sticky onboarding footer: background down to the bottom edge + entrance animation.
 class OnboardingStickyFooter extends StatelessWidget {
   const OnboardingStickyFooter({
     super.key,
@@ -19,7 +19,7 @@ class OnboardingStickyFooter extends StatelessWidget {
   final int animationDelayMs;
   final double horizontalPadding;
 
-  /// Largura máxima do conteúdo (ex.: 600 em telas médias).
+  /// Maximum content width (e.g. 600 on medium screens).
   final double? maxContentWidth;
 
   @override
@@ -44,11 +44,22 @@ class OnboardingStickyFooter extends StatelessWidget {
       width: double.infinity,
       decoration: BoxDecoration(
         color: context.colors.background,
+        border: Border(
+          top: BorderSide(
+            // Hairline separator: faint light in dark mode, faint dark in light.
+            color: context.isDark
+                ? Colors.white.withValues(alpha: 0.06)
+                : Colors.black.withValues(alpha: 0.06),
+          ),
+        ),
         boxShadow: [
+          // Dark, never tinted — avoids a white halo above the footer in dark mode.
           BoxShadow(
-            color: context.colors.onBackground.withValues(alpha: 0.06),
-            blurRadius: 16,
-            offset: const Offset(0, -4),
+            color: Colors.black.withValues(
+              alpha: context.isDark ? 0.20 : 0.04,
+            ),
+            blurRadius: 20,
+            offset: const Offset(0, -6),
           ),
         ],
       ),

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

@@ -62,8 +62,9 @@ class _OnboardingSelectableRowGroupState
           children: [
             Material(
               color: Colors.transparent,
-              borderRadius: KasyRadius.mdBorderRadius,
+              borderRadius: KasyRadius.lgBorderRadius,
               child: InkWell(
+                borderRadius: KasyRadius.lgBorderRadius,
                 onTap: () {
                   if (_selectedIndex == index) {
                     return;
@@ -241,20 +242,22 @@ class _SelectableRowTileState extends State<SelectableRowTile>
 
   @override
   Widget build(BuildContext context) {
-    return Ink(
+    final colors = context.colors;
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 180),
+      curve: Curves.easeOut,
       decoration: BoxDecoration(
         border: Border.all(
-          color: widget.selected //
-              ? context.colors.primary.withValues(alpha:.6)
-              : context.colors.primary.withValues(alpha:.1),
-          width: widget.selected ? 2 : 1,
+          color: widget.selected ? colors.primary : colors.outline,
+          width: widget.selected ? 1.5 : 1,
         ),
-        borderRadius: KasyRadius.mdBorderRadius,
-        color: widget.selected
-            ? context.colors.primary.withValues(alpha:.3)
-            : context.colors.surface,
+        borderRadius: KasyRadius.lgBorderRadius,
+        color: widget.selected ? colors.surfacePrimarySoft : colors.surface,
+      ),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.md + 2,
       ),
-      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.lg, vertical: KasySpacing.md),
       child: Row(
         children: [
           if (widget.emoj != null)
@@ -278,7 +281,9 @@ class _SelectableRowTileState extends State<SelectableRowTile>
                   Text(
                     widget.title!,
                     style: context.textTheme.bodyLarge?.copyWith(
-                      fontWeight: FontWeight.w400,
+                      color: colors.onSurface,
+                      fontWeight:
+                          widget.selected ? FontWeight.w700 : FontWeight.w600,
                     ),
                   ),
                 if (widget.subtitle != null)
@@ -342,8 +347,8 @@ class RoundRadioBox extends StatelessWidget {
     double iconSize = 1,
   }) {
     return RoundRadioBox(
-      bgColor: context.colors.background.withValues(alpha:.3),
-      borderColor: context.colors.onPrimary.withValues(alpha:.3),
+      bgColor: context.colors.primary,
+      borderColor: context.colors.primary,
       icon: KasyIcons.check,
       iconOpacity: iconOpacity,
       iconSize: iconSize,
@@ -353,23 +358,22 @@ class RoundRadioBox extends StatelessWidget {
   // ignore: avoid_unused_constructor_parameters
   factory RoundRadioBox.unselected(BuildContext context) {
     return RoundRadioBox(
-      bgColor: context.colors.outline,
-      borderColor: context.colors.surface.withValues(alpha:.1),
+      bgColor: Colors.transparent,
+      borderColor: context.colors.outlineButton,
     );
   }
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      width: 28,
-      height: 28,
+      width: 24,
+      height: 24,
       decoration: BoxDecoration(
         color: bgColor,
         shape: BoxShape.circle,
         border: Border.all(
           color: borderColor,
-          width: 4,
-          strokeAlign: BorderSide.strokeAlignOutside,
+          width: 2,
         ),
       ),
       child: Center(
@@ -380,8 +384,8 @@ class RoundRadioBox extends StatelessWidget {
                   scale: iconSize,
                   child: Icon(
                     icon,
-                    color: context.colors.muted,
-                    size: 21,
+                    color: context.colors.onPrimary,
+                    size: 15,
                   ),
                 ),
               )