feat: complete 20-screen onboarding flow

Full quiz flow s01-s20: splash, intro, value prop, social proof, name/skin-type/age/concerns/goal quiz with insights, analysing loader, result with skin score, AM/PM routines, ingredient science, signup, welcome. Duolingo-style design: flat cards, pressable SButton (Stack trick), 4px progress bar, mascot moods (wave/think/analyze/celebrate), confetti on result+welcome, personalized content throughout.
2026-05-28 17:11:27 +02:00
parent 6311088256
commit 93042cbb4c
26 changed files with 2582 additions and 2 deletions
--- a/lib/screens/onboarding/s19_signup.dart
+++ b/lib/screens/onboarding/s19_signup.dart
@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import '../../theme.dart';
+import '../../widgets/mascot.dart';
+import '../../widgets/s_button.dart';
+import '../../model/quiz_state.dart';
+import '../../router.dart';
+import 's20_welcome.dart';
+
+class SignupScreen extends StatefulWidget {
+  final QuizState state;
+  const SignupScreen({super.key, required this.state});
+  @override
+  State<SignupScreen> createState() => _State();
+}
+
+class _State extends State<SignupScreen> {
+  final _email = TextEditingController();
+  bool _ready = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _email.addListener(() => setState(
+      () => _ready = _email.text.contains('@') && _email.text.contains('.'),
+    ));
+  }
+
+  @override
+  void dispose() { _email.dispose(); super.dispose(); }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: SColors.bgSurface,
+      resizeToAvoidBottomInset: true,
+      body: SafeArea(
+        child: Column(
+          children: [
+            Expanded(
+              flex: 38,
+              child: Container(
+                color: SColors.primaryLight,
+                width: double.infinity,
+                child: Center(
+                  child: Mascot(mood: MascotMood.wave, size: 140)
+                      .animate().fadeIn(duration: 600.ms).slideY(begin: 0.08, end: 0),
+                ),
+              ),
+            ),
+            Expanded(
+              flex: 62,
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.symmetric(horizontal: 24),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const SizedBox(height: 20),
+                    Text('Save your\nresults 🔒', style: SText.headline2(SColors.textHead))
+                        .animate().fadeIn(duration: 400.ms, delay: 200.ms)
+                        .slideY(begin: 0.05, end: 0),
+                    const SizedBox(height: 8),
+                    Text('Create a free account to access your personalised routine anytime.',
+                        style: SText.subtitle(SColors.textSub))
+                        .animate().fadeIn(duration: 400.ms, delay: 280.ms),
+                    const SizedBox(height: 24),
+                    _inputField('Email address', _email, TextInputType.emailAddress)
+                        .animate().fadeIn(duration: 400.ms, delay: 360.ms),
+                    const SizedBox(height: 12),
+                    _benefitsList()
+                        .animate().fadeIn(duration: 400.ms, delay: 440.ms),
+                    const SizedBox(height: 24),
+                    SButton(
+                      label: 'CREATE FREE ACCOUNT',
+                      enabled: _ready,
+                      onTap: _ready ? () => Navigator.of(context).push(
+                        scaleRoute(WelcomeScreen(state: widget.state))
+                      ) : null,
+                    ).animate().fadeIn(duration: 400.ms, delay: 520.ms),
+                    const SizedBox(height: 12),
+                    Center(
+                      child: GestureDetector(
+                        onTap: () => Navigator.of(context).push(scaleRoute(WelcomeScreen(state: widget.state))),
+                        child: Text('Maybe later', style: SText.caption(SColors.textSub)),
+                      ),
+                    ).animate().fadeIn(duration: 400.ms, delay: 580.ms),
+                    const SizedBox(height: 20),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _inputField(String hint, TextEditingController ctrl, TextInputType type) {
+    return Container(
+      decoration: BoxDecoration(
+        color: SColors.bgSurface,
+        borderRadius: BorderRadius.circular(14),
+        border: Border.all(color: SColors.borderMedium, width: 1.5),
+      ),
+      child: TextField(
+        controller: ctrl,
+        keyboardType: type,
+        style: SText.cardLabel(SColors.textHead).copyWith(fontSize: 16),
+        decoration: InputDecoration(
+          hintText: hint,
+          hintStyle: SText.cardLabel(SColors.textDisabled).copyWith(fontSize: 16, fontWeight: FontWeight.w500),
+          border: InputBorder.none,
+          contentPadding: const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
+        ),
+      ),
+    );
+  }
+
+  Widget _benefitsList() {
+    const items = [
+      (Icons.sync_rounded, 'Routine syncs across devices'),
+      (Icons.notifications_rounded, 'Daily check-in reminders'),
+      (Icons.trending_up_rounded, 'Track your skin progress'),
+    ];
+    return Column(
+      children: items.map((item) => Padding(
+        padding: const EdgeInsets.only(bottom: 10),
+        child: Row(
+          children: [
+            Container(
+              width: 28, height: 28,
+              decoration: const BoxDecoration(color: SColors.primaryLight, shape: BoxShape.circle),
+              child: Icon(item.$1, size: 14, color: SColors.primary),
+            ),
+            const SizedBox(width: 10),
+            Text(item.$2, style: SText.body(SColors.textBody)),
+          ],
+        ),
+      )).toList(),
+    );
+  }
+}