449 lines
14 KiB
Dart
449 lines
14 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
|
|
|
import '../core/theme.dart';
|
|
import '../state/session_controller.dart';
|
|
|
|
/// Brand wordmark. Drawn rather than shipped as an asset so it tints cleanly
|
|
/// on either ground.
|
|
class KrowWordmark extends StatelessWidget {
|
|
const KrowWordmark({super.key, this.size = 34, this.color});
|
|
|
|
final double size;
|
|
final Color? color;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Text(
|
|
'KROW',
|
|
style: TextStyle(
|
|
fontSize: size,
|
|
fontWeight: FontWeight.w800,
|
|
letterSpacing: size * 0.06,
|
|
color: color ?? KrowPalette.yellow,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Splash. Routes on to onboarding, sign-in or the app depending on how far
|
|
/// the worker got last time.
|
|
class SplashScreen extends ConsumerStatefulWidget {
|
|
const SplashScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<SplashScreen> createState() => _SplashScreenState();
|
|
}
|
|
|
|
class _SplashScreenState extends ConsumerState<SplashScreen> {
|
|
Timer? _timer;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_timer = Timer(const Duration(milliseconds: 1400), _go);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_timer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
void _go() {
|
|
if (!mounted) return;
|
|
final s = ref.read(sessionProvider);
|
|
if (!s.onboardingSeen) {
|
|
context.go('/onboarding');
|
|
} else if (!s.signedIn) {
|
|
context.go('/welcome');
|
|
} else if (!s.permissionsDone) {
|
|
context.go('/permissions');
|
|
} else {
|
|
context.go('/today');
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: KrowPalette.blue,
|
|
body: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
const KrowWordmark(size: 46),
|
|
const SizedBox(height: 22),
|
|
Text(
|
|
'WORK · HIRE · ELEVATE',
|
|
style: TextStyle(
|
|
fontSize: 10.5,
|
|
letterSpacing: 3,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.white.withValues(alpha: 0.6),
|
|
),
|
|
),
|
|
const SizedBox(height: 44),
|
|
SizedBox(
|
|
width: 140,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(2),
|
|
child: LinearProgressIndicator(
|
|
minHeight: 3,
|
|
backgroundColor: Colors.white24,
|
|
valueColor: const AlwaysStoppedAnimation(KrowPalette.yellow),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _Slide {
|
|
const _Slide(this.eyebrow, this.title, this.body, this.icon);
|
|
|
|
final String eyebrow;
|
|
final String title;
|
|
final String body;
|
|
final IconData icon;
|
|
}
|
|
|
|
const _slides = [
|
|
_Slide(
|
|
'Find work',
|
|
'Shifts that fit around your week.',
|
|
'Browse open hospitality shifts near you, filtered to the hours you said '
|
|
'you can work.',
|
|
LucideIcons.search,
|
|
),
|
|
_Slide(
|
|
'Know your pay',
|
|
'See the money before you say yes.',
|
|
'Every shift shows the hourly rate and the total. No surprises on the '
|
|
'payslip.',
|
|
LucideIcons.banknote,
|
|
),
|
|
_Slide(
|
|
'Get paid',
|
|
'Clock in on site. Paid on schedule.',
|
|
'Tap in when you arrive, tap out when you leave. Timecards submit '
|
|
'themselves.',
|
|
LucideIcons.clock,
|
|
),
|
|
];
|
|
|
|
class OnboardingScreen extends ConsumerStatefulWidget {
|
|
const OnboardingScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<OnboardingScreen> createState() => _OnboardingScreenState();
|
|
}
|
|
|
|
class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
|
|
final _controller = PageController();
|
|
int _page = 0;
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _finish() {
|
|
ref.read(sessionProvider.notifier).completeOnboarding();
|
|
context.go('/welcome');
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isLast = _page == _slides.length - 1;
|
|
return Scaffold(
|
|
backgroundColor: KrowPalette.blue,
|
|
body: Column(
|
|
children: [
|
|
SafeArea(
|
|
bottom: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(22, 8, 12, 0),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
const KrowWordmark(size: 20),
|
|
TextButton(
|
|
onPressed: _finish,
|
|
style: TextButton.styleFrom(
|
|
foregroundColor: Colors.white70,
|
|
),
|
|
child: const Text('Skip'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: PageView.builder(
|
|
controller: _controller,
|
|
itemCount: _slides.length,
|
|
onPageChanged: (i) => setState(() => _page = i),
|
|
itemBuilder: (context, i) {
|
|
final slide = _slides[i];
|
|
return Center(
|
|
child: Container(
|
|
width: 190,
|
|
height: 190,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withValues(alpha: 0.10),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
slide.icon,
|
|
size: 76,
|
|
color: KrowPalette.yellow,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
Container(
|
|
width: double.infinity,
|
|
decoration: const BoxDecoration(
|
|
color: KrowPalette.sage,
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
|
),
|
|
child: SafeArea(
|
|
top: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(24, 26, 24, 20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
_slides[_page].eyebrow.toUpperCase(),
|
|
style: const TextStyle(
|
|
fontSize: 10.5,
|
|
fontWeight: FontWeight.w600,
|
|
letterSpacing: 1.6,
|
|
color: Color(0xFF949FA5),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
_slides[_page].title,
|
|
style: const TextStyle(
|
|
fontSize: 29,
|
|
fontWeight: FontWeight.w700,
|
|
height: 1.1,
|
|
letterSpacing: -1,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
_slides[_page].body,
|
|
style: const TextStyle(
|
|
fontSize: 14.5,
|
|
height: 1.55,
|
|
color: KrowPalette.mute,
|
|
),
|
|
),
|
|
const SizedBox(height: 22),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
for (var i = 0; i < _slides.length; i++)
|
|
AnimatedContainer(
|
|
duration: const Duration(milliseconds: 220),
|
|
margin: const EdgeInsets.symmetric(horizontal: 3),
|
|
width: i == _page ? 24 : 6,
|
|
height: 6,
|
|
decoration: BoxDecoration(
|
|
color: i == _page
|
|
? KrowPalette.blue
|
|
: const Color(0xFFC6D6CC),
|
|
borderRadius: BorderRadius.circular(3),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 18),
|
|
FilledButton(
|
|
onPressed: () {
|
|
if (isLast) {
|
|
_finish();
|
|
} else {
|
|
_controller.nextPage(
|
|
duration: const Duration(milliseconds: 260),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
},
|
|
child: Text(isLast ? 'Create your account' : 'Next'),
|
|
),
|
|
if (isLast)
|
|
Center(
|
|
child: TextButton(
|
|
onPressed: _finish,
|
|
child: const Text('I already have an account'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class WelcomeScreen extends StatelessWidget {
|
|
const WelcomeScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: KrowPalette.blue,
|
|
body: Column(
|
|
children: [
|
|
Expanded(
|
|
child: SafeArea(
|
|
bottom: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 30),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const KrowWordmark(size: 40),
|
|
const SizedBox(height: 34),
|
|
const Text(
|
|
'Work the shifts\nyou actually want.',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 32,
|
|
height: 1.1,
|
|
letterSpacing: -1.1,
|
|
fontWeight: FontWeight.w700,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
const SizedBox(height: 14),
|
|
Text(
|
|
'Hospitality work in your city, priced up front and paid '
|
|
'on a fixed schedule.',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 14.5,
|
|
height: 1.55,
|
|
color: Colors.white.withValues(alpha: 0.64),
|
|
),
|
|
),
|
|
const SizedBox(height: 34),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
_WelcomeStat('4,200', 'Shifts this month'),
|
|
Container(
|
|
width: 1,
|
|
height: 38,
|
|
margin: const EdgeInsets.symmetric(horizontal: 26),
|
|
color: Colors.white24,
|
|
),
|
|
_WelcomeStat(r'$21+', 'Average rate'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
width: double.infinity,
|
|
decoration: const BoxDecoration(
|
|
color: KrowPalette.sage,
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
|
),
|
|
child: SafeArea(
|
|
top: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(22, 24, 22, 16),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
FilledButton(
|
|
onPressed: () => context.push('/phone'),
|
|
child: const Text('Continue with mobile'),
|
|
),
|
|
const SizedBox(height: 10),
|
|
OutlinedButton(
|
|
onPressed: () =>
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text(
|
|
'Invite codes open in the next release',
|
|
),
|
|
),
|
|
),
|
|
child: const Text('I have an invite code'),
|
|
),
|
|
const SizedBox(height: 12),
|
|
const Text(
|
|
'By continuing you accept the Worker Terms.',
|
|
style: TextStyle(
|
|
fontSize: 11.5,
|
|
color: Color(0xFF949FA5),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _WelcomeStat extends StatelessWidget {
|
|
const _WelcomeStat(this.value, this.caption);
|
|
|
|
final String value;
|
|
final String caption;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
Text(
|
|
value,
|
|
style: const TextStyle(
|
|
fontSize: 22,
|
|
fontWeight: FontWeight.w700,
|
|
letterSpacing: -0.8,
|
|
color: KrowPalette.yellow,
|
|
),
|
|
),
|
|
const SizedBox(height: 3),
|
|
Text(
|
|
caption.toUpperCase(),
|
|
style: TextStyle(
|
|
fontSize: 9.5,
|
|
letterSpacing: 1.1,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.white.withValues(alpha: 0.55),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|