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.
This commit is contained in:
47
lib/screens/onboarding/s01_splash.dart
Normal file
47
lib/screens/onboarding/s01_splash.dart
Normal file
@@ -0,0 +1,47 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_animate/flutter_animate.dart';
|
||||
import '../../theme.dart';
|
||||
import '../../widgets/mascot.dart';
|
||||
import 's02_hi_im_shaynee.dart';
|
||||
import '../../router.dart';
|
||||
|
||||
class SplashScreen extends StatefulWidget {
|
||||
const SplashScreen({super.key});
|
||||
@override
|
||||
State<SplashScreen> createState() => _State();
|
||||
}
|
||||
|
||||
class _State extends State<SplashScreen> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
Future.delayed(const Duration(milliseconds: 2600), () {
|
||||
if (mounted) Navigator.of(context).pushReplacement(fadeRoute(const HiImShayneeScreen()));
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: SColors.bgSurface,
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
const Spacer(flex: 2),
|
||||
Mascot(mood: MascotMood.neutral, size: 200)
|
||||
.animate()
|
||||
.fadeIn(duration: 700.ms, delay: 300.ms)
|
||||
.slideY(begin: 0.1, end: 0, duration: 700.ms, curve: Curves.easeOut),
|
||||
const SizedBox(height: 28),
|
||||
Text('shaynee', style: SText.headline1(SColors.textHead).copyWith(fontSize: 44, letterSpacing: -1))
|
||||
.animate().fadeIn(duration: 600.ms, delay: 600.ms),
|
||||
const SizedBox(height: 6),
|
||||
Text('your ai skincare companion', style: SText.subtitle(SColors.textSub))
|
||||
.animate().fadeIn(duration: 600.ms, delay: 800.ms),
|
||||
const Spacer(flex: 3),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user