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
128
lib/screens/onboarding/s18_ingredient_science.dart
Normal file
128
lib/screens/onboarding/s18_ingredient_science.dart
Normal file
@@ -0,0 +1,128 @@
|
||||
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 's19_signup.dart';
|
||||
|
||||
class IngredientScienceScreen extends StatelessWidget {
|
||||
final QuizState state;
|
||||
const IngredientScienceScreen({super.key, required this.state});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (hero, title, body, ingredients) = _content(state);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: SColors.bgSurface,
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 40,
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Mascot(mood: MascotMood.analyze, size: 160)
|
||||
.animate().fadeIn(duration: 500.ms).slideY(begin: 0.06, end: 0),
|
||||
Positioned(
|
||||
top: 20, right: 40,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: SColors.bgSurface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(color: SColors.borderLight),
|
||||
),
|
||||
child: Text(hero, style: const TextStyle(fontSize: 28)),
|
||||
).animate().fadeIn(duration: 400.ms, delay: 600.ms)
|
||||
.scaleXY(begin: 0.6, end: 1.0, duration: 400.ms, curve: Curves.elasticOut),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
flex: 60,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
_badge('🔬 Ingredient science')
|
||||
.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: 8),
|
||||
Text(body, style: SText.subtitle(SColors.textSub))
|
||||
.animate().fadeIn(duration: 400.ms, delay: 260.ms),
|
||||
const SizedBox(height: 16),
|
||||
Wrap(
|
||||
spacing: 8, runSpacing: 8,
|
||||
children: ingredients.asMap().entries.map((e) =>
|
||||
_chip(e.value, e.key)
|
||||
).toList(),
|
||||
).animate().fadeIn(duration: 400.ms, delay: 360.ms),
|
||||
const Spacer(),
|
||||
SButton(
|
||||
label: 'SAVE MY RESULTS',
|
||||
onTap: () => Navigator.of(context).push(slideRoute(SignupScreen(state: state))),
|
||||
).animate().fadeIn(duration: 400.ms, delay: 500.ms),
|
||||
const SizedBox(height: 12),
|
||||
Center(
|
||||
child: GestureDetector(
|
||||
onTap: () => Navigator.of(context).push(slideRoute(SignupScreen(state: state))),
|
||||
child: Text('Skip for now', style: SText.caption(SColors.textSub)),
|
||||
),
|
||||
).animate().fadeIn(duration: 400.ms, delay: 560.ms),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
(String, String, String, List<String>) _content(QuizState state) {
|
||||
if (state.concerns.contains('Dark spots')) {
|
||||
return ('☀️', 'Your skin needs\nVitamin C + SPF', 'This combo fades dark spots faster than any other. Vitamin C inhibits melanin production, SPF stops new ones forming.', ['Vitamin C 15%', 'Niacinamide', 'Alpha Arbutin', 'SPF 50+']);
|
||||
}
|
||||
if (state.concerns.contains('Fine lines')) {
|
||||
return ('⏳', 'Retinol is\nyour best ally', 'The most clinically proven anti-aging ingredient. Starts at 0.3%, works up to 1%. Use at night only.', ['Retinol 0.3%', 'Peptides', 'Hyaluronic acid', 'SPF 50+']);
|
||||
}
|
||||
if (state.concerns.contains('Breakouts')) {
|
||||
return ('🫧', 'Your skin needs\nSalicylic acid', 'BHA that gets inside pores to clear them out. 2% is the sweet spot — effective without over-drying.', ['Salicylic acid 2%', 'Niacinamide 10%', 'Benzoyl peroxide', 'Zinc']);
|
||||
}
|
||||
return ('💧', 'Hydration is\neverything', 'A healthy moisture barrier is the foundation of all great skin. These ingredients rebuild and lock it in.', ['Hyaluronic acid', 'Ceramides', 'Glycerin', 'Squalane']);
|
||||
}
|
||||
|
||||
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)),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _chip(String label, int i) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
|
||||
decoration: BoxDecoration(
|
||||
color: SColors.bgSurface,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: SColors.primary.withAlpha(80)),
|
||||
),
|
||||
child: Text(label, style: SText.caption(SColors.primary).copyWith(fontWeight: FontWeight.w600)),
|
||||
)
|
||||
.animate(delay: (i * 80).ms)
|
||||
.fadeIn(duration: 250.ms)
|
||||
.scaleXY(begin: 0.8, end: 1.0, duration: 250.ms, curve: Curves.easeOut);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user