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:
mav
171
lib/screens/onboarding/s15_result.dart
Normal file
171
lib/screens/onboarding/s15_result.dart
Normal file
@@ -0,0 +1,171 @@
|
||||
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 '../../widgets/confetti.dart';
|
||||
import '../../model/quiz_state.dart';
|
||||
import '../../router.dart';
|
||||
import 's16_routine_am.dart';
|
||||
|
||||
class ResultScreen extends StatefulWidget {
|
||||
final QuizState state;
|
||||
const ResultScreen({super.key, required this.state});
|
||||
@override
|
||||
State<ResultScreen> createState() => _State();
|
||||
}
|
||||
|
||||
class _State extends State<ResultScreen> {
|
||||
bool _showConfetti = true;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
Future.delayed(const Duration(milliseconds: 2500), () {
|
||||
if (mounted) setState(() => _showConfetti = false);
|
||||
});
|
||||
}
|
||||
|
||||
String get _firstName => widget.state.name.split(' ').first;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: SColors.bgSurface,
|
||||
body: Stack(
|
||||
children: [
|
||||
SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Mascot zone — KEY MOMENT
|
||||
Expanded(
|
||||
flex: 38,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
color: SColors.primaryLight,
|
||||
child: Center(
|
||||
child: Mascot(mood: MascotMood.celebrate, size: 180)
|
||||
.animate()
|
||||
.fadeIn(duration: 700.ms)
|
||||
.slideY(begin: 0.1, end: 0, duration: 700.ms, curve: Curves.easeOut),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Content
|
||||
Expanded(
|
||||
flex: 62,
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(height: 20),
|
||||
Text("Your skin report\nis ready, $_firstName! ✨",
|
||||
style: SText.headline2(SColors.textHead))
|
||||
.animate().fadeIn(duration: 500.ms, delay: 300.ms)
|
||||
.slideY(begin: 0.06, end: 0),
|
||||
const SizedBox(height: 6),
|
||||
Text("Based on your answers, here's what we found.",
|
||||
style: SText.subtitle(SColors.textSub))
|
||||
.animate().fadeIn(duration: 500.ms, delay: 420.ms),
|
||||
const SizedBox(height: 20),
|
||||
_profileCard()
|
||||
.animate().fadeIn(duration: 500.ms, delay: 500.ms)
|
||||
.slideY(begin: 0.05, end: 0),
|
||||
const SizedBox(height: 12),
|
||||
_skinScoreCard()
|
||||
.animate().fadeIn(duration: 500.ms, delay: 600.ms)
|
||||
.slideY(begin: 0.05, end: 0),
|
||||
const SizedBox(height: 24),
|
||||
SButton(
|
||||
label: 'SEE MY ROUTINE',
|
||||
onTap: () => Navigator.of(context).push(slideRoute(RoutineAmScreen(state: widget.state))),
|
||||
).animate().fadeIn(duration: 400.ms, delay: 700.ms),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_showConfetti) const Positioned.fill(child: IgnorePointer(child: ConfettiOverlay())),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _profileCard() {
|
||||
final rows = [
|
||||
('Skin type', widget.state.skinType),
|
||||
('Age range', widget.state.age),
|
||||
('Concerns', widget.state.concerns.join(', ')),
|
||||
('Main goal', widget.state.goal),
|
||||
];
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(18),
|
||||
decoration: BoxDecoration(
|
||||
color: SColors.bgSurface,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: SColors.borderLight, width: 1.5),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('YOUR SKIN PROFILE', style: SText.caption(SColors.textSub).copyWith(fontWeight: FontWeight.w700, letterSpacing: 0.8)),
|
||||
const SizedBox(height: 12),
|
||||
...rows.where((r) => r.$2.isNotEmpty).map((r) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(r.$1, style: SText.body(SColors.textSub)),
|
||||
const Spacer(),
|
||||
Flexible(child: Text(r.$2, textAlign: TextAlign.end,
|
||||
style: SText.body(SColors.textHead).copyWith(fontWeight: FontWeight.w700))),
|
||||
],
|
||||
),
|
||||
)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _skinScoreCard() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(18),
|
||||
decoration: BoxDecoration(
|
||||
color: SColors.primaryLight,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: SColors.borderLight),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 64, height: 64,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: SColors.bgSurface,
|
||||
border: Border.all(color: SColors.primary, width: 2),
|
||||
),
|
||||
child: Center(
|
||||
child: Text('87', style: SText.headline2(SColors.primary).copyWith(fontSize: 22)),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Skin potential score', style: SText.cardLabel(SColors.textHead)),
|
||||
const SizedBox(height: 4),
|
||||
Text('With the right routine, you can reach 95+ in 4 weeks.',
|
||||
style: SText.cardSub(SColors.textSub)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user