- 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
109 lines
3.3 KiB
Dart
109 lines
3.3 KiB
Dart
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),
|
|
),
|
|
);
|
|
}
|
|
}
|