93042cbb4c
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.
107 lines
4.3 KiB
Dart
107 lines
4.3 KiB
Dart
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 's08_age.dart';
|
|
|
|
class SkinInsightScreen extends StatelessWidget {
|
|
final QuizState state;
|
|
const SkinInsightScreen({super.key, required this.state});
|
|
|
|
static const _insights = {
|
|
'Oily': ('💧', 'Oily skin ages slower!', 'The extra sebum keeps skin moisturised naturally. With the right routine, you can have a balanced, glowing complexion.'),
|
|
'Dry': ('🌸', 'Dry skin loves rich textures.', 'Ceramides and hyaluronic acid are your BFFs. We\'ll build a routine that keeps your moisture barrier strong.'),
|
|
'Combination': ('⚖️', 'Combination skin needs balance.', 'The trick is targeted treatment — light hydration for the T-zone, richer care for dry areas.'),
|
|
'Normal': ('✨', 'Normal skin is rare!', 'Less than 15% of people have it. The goal is maintaining what you\'ve got with a simple, consistent routine.'),
|
|
'Not sure': ('🔍', 'Let\'s figure it out together.', 'Your skin tells a story — we\'ll decode it for you with a quick deep dive into your habits and concerns.'),
|
|
};
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final (emoji, title, body) = _insights[state.skinType] ?? _insights['Normal']!;
|
|
|
|
return Scaffold(
|
|
backgroundColor: SColors.bgSurface,
|
|
body: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
// Illustration zone
|
|
Expanded(
|
|
flex: 42,
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
Mascot(mood: MascotMood.think, size: 160)
|
|
.animate().fadeIn(duration: 500.ms).slideY(begin: 0.06, end: 0),
|
|
Positioned(
|
|
top: 24,
|
|
right: 50,
|
|
child: _bubble(emoji)
|
|
.animate().fadeIn(duration: 400.ms, delay: 600.ms)
|
|
.scaleXY(begin: 0.5, end: 1.0, duration: 400.ms, curve: Curves.elasticOut),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Content zone
|
|
Expanded(
|
|
flex: 58,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 8),
|
|
_badge('Did you know?')
|
|
.animate().fadeIn(duration: 350.ms, delay: 100.ms),
|
|
const SizedBox(height: 14),
|
|
Text(title, style: SText.headline2(SColors.textHead))
|
|
.animate().fadeIn(duration: 400.ms, delay: 180.ms)
|
|
.slideY(begin: 0.05, end: 0),
|
|
const SizedBox(height: 10),
|
|
Text(body, style: SText.subtitle(SColors.textSub))
|
|
.animate().fadeIn(duration: 400.ms, delay: 260.ms),
|
|
const Spacer(),
|
|
SButton(
|
|
label: 'COOL, GOT IT',
|
|
onTap: () => Navigator.of(context).push(slideRoute(AgeScreen(state: state))),
|
|
).animate().fadeIn(duration: 400.ms, delay: 400.ms),
|
|
const SizedBox(height: 20),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _bubble(String emoji) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: SColors.bgSurface,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: SColors.borderLight, width: 1.5),
|
|
boxShadow: [BoxShadow(color: Colors.black.withAlpha(10), blurRadius: 8)],
|
|
),
|
|
child: Text(emoji, style: const TextStyle(fontSize: 28)),
|
|
);
|
|
}
|
|
|
|
Widget _badge(String label) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: SColors.primaryLight,
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(label, style: SText.caption(SColors.primary).copyWith(fontWeight: FontWeight.w700)),
|
|
);
|
|
}
|
|
}
|