Initial commit: Krow Worker App
This commit is contained in:
R-Bharathraj
448
lib/screens/onboarding_screens.dart
Normal file
448
lib/screens/onboarding_screens.dart
Normal file
@@ -0,0 +1,448 @@
|
||||
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),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user