feat: full onboarding + quiz flow (Flutter from scratch)

- splash → intro → 5-step quiz → result screen - Plus Jakarta Sans typography, indigo brand system - animated quiz rows, multi-select concerns, progress bar - Shaynee mascot reveal on result screen only - flutter_animate for all transitions
2026-05-28 16:20:18 +02:00
parent 74c712dbae
commit 30cee5a486
12 changed files with 1567 additions and 144 deletions
--- a/lib/screens/splash_screen.dart
+++ b/lib/screens/splash_screen.dart
@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../theme.dart';
+import 'intro_screen.dart';
+
+class SplashScreen extends StatefulWidget {
+  const SplashScreen({super.key});
+
+  @override
+  State<SplashScreen> createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> {
+  @override
+  void initState() {
+    super.initState();
+    Future.delayed(const Duration(milliseconds: 2600), _goNext);
+  }
+
+  void _goNext() {
+    if (!mounted) return;
+    Navigator.of(context).pushReplacement(
+      PageRouteBuilder(
+        pageBuilder: (_, a, __) => const IntroScreen(),
+        transitionsBuilder: (_, a, __, child) =>
+            FadeTransition(opacity: a, child: child),
+        transitionDuration: const Duration(milliseconds: 500),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            colors: [Color(0xFF3D32A8), Color(0xFF5B4FCF), Color(0xFF8B5CF6)],
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
+          ),
+        ),
+        child: SafeArea(
+          child: Column(
+            children: [
+              const Spacer(flex: 2),
+              Image.asset(
+                'assets/images/shaynee_hero.png',
+                height: 240,
+                fit: BoxFit.contain,
+              )
+                  .animate()
+                  .fadeIn(duration: 700.ms, delay: 200.ms)
+                  .slideY(begin: 0.15, end: 0, duration: 700.ms, curve: Curves.easeOut),
+              const SizedBox(height: 28),
+              Text(
+                'shaynee',
+                style: GoogleFonts.plusJakartaSans(
+                  fontSize: 42,
+                  fontWeight: FontWeight.w800,
+                  color: Colors.white,
+                  letterSpacing: -1.0,
+                ),
+              )
+                  .animate()
+                  .fadeIn(duration: 600.ms, delay: 500.ms),
+              const SizedBox(height: 8),
+              Text(
+                'your AI skincare companion',
+                style: GoogleFonts.plusJakartaSans(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w400,
+                  color: Colors.white.withAlpha(180),
+                  letterSpacing: 0.2,
+                ),
+              )
+                  .animate()
+                  .fadeIn(duration: 600.ms, delay: 700.ms),
+              const Spacer(flex: 3),
+              Padding(
+                padding: const EdgeInsets.only(bottom: 40),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: List.generate(3, (i) => _dot(i)),
+                )
+                    .animate()
+                    .fadeIn(duration: 500.ms, delay: 1200.ms),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _dot(int i) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 4),
+      width: i == 0 ? 24 : 8,
+      height: 8,
+      decoration: BoxDecoration(
+        color: i == 0 ? Colors.white : Colors.white.withAlpha(80),
+        borderRadius: BorderRadius.circular(4),
+      ),
+    );
+  }
+}