Krow/krow-worker-app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI, branding assets, onboarding flow, and screen layouts

Browse Source
This commit is contained in:
R-Bharathraj
2026-09-18 15:23:30 +05:30
parent cafffd27e0
commit 5122eebc11
68 changed files with 1661 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
lib/screens/onboarding_screens.dart
View File

@@ -2,33 +2,13 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.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,
),
);
}
}
import '../widgets/common.dart';
import '../widgets/krow_wordmark.dart';
/// Splash. Routes on to onboarding, sign-in or the app depending on how far
/// the worker got last time.
@@ -57,10 +37,11 @@ class _SplashScreenState extends ConsumerState<SplashScreen> {
void _go() {
if (!mounted) return;
final s = ref.read(sessionProvider);
if (!s.onboardingSeen) {
// Onboarding sits between the splash and the welcome screen for anyone
// who is not signed in, rather than only on a first install — the flow is
// splash, onboarding, welcome, mobile number.
if (!s.signedIn) {
context.go('/onboarding');
} else if (!s.signedIn) {
context.go('/welcome');
} else if (!s.permissionsDone) {
context.go('/permissions');
} else {
@@ -76,7 +57,7 @@ class _SplashScreenState extends ConsumerState<SplashScreen> {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const KrowWordmark(size: 46),
const KrowWordmark(width: 196),
const SizedBox(height: 22),
Text(
'WORK · HIRE · ELEVATE',
@@ -107,38 +88,177 @@ class _SplashScreenState extends ConsumerState<SplashScreen> {
}
class _Slide {
const _Slide(this.eyebrow, this.title, this.body, this.icon);
const _Slide({
required this.eyebrow,
required this.title,
required this.body,
required this.art,
required this.preview,
});
final String eyebrow;
final String title;
final String body;
final IconData icon;
/// The scene behind the copy, taken from the prototype's own artwork.
final String art;
/// A sample of the thing the slide is describing, floated over the artwork.
/// Each one is a real piece of the app rather than an illustration.
final Widget preview;
}
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,
eyebrow: 'Find work',
title: 'Shifts that fit around your week.',
body:
'Browse open hospitality shifts near you, filtered to the hours you '
'said you can work.',
art: 'assets/art/onboarding_find_work.svg',
preview: _PreviewCard(
accent: KrowPalette.yellow,
title: r'Barista · $21/hr',
subtitle: 'Zoox · tonight, 5:50 PM',
),
),
_Slide(
'Know your pay',
'See the money before you say yes.',
'Every shift shows the hourly rate and the total. No surprises on the '
eyebrow: 'Know your pay',
title: 'See the money before you say yes.',
body:
'Every shift shows the hourly rate and the total. No surprises on the '
'payslip.',
LucideIcons.banknote,
art: 'assets/art/onboarding_know_your_pay.svg',
preview: _PreviewRow(
label: 'Regular · 5h 48m',
trailing: Text(
r'$121.80',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: KrowPalette.ink,
),
),
),
),
_Slide(
'Get paid',
'Clock in on site. Paid on schedule.',
'Tap in when you arrive, tap out when you leave. Timecards submit '
eyebrow: 'Get paid',
title: 'Clock in on site. Paid on schedule.',
body:
'Tap in when you arrive, tap out when you leave. Timecards submit '
'themselves.',
LucideIcons.clock,
art: 'assets/art/onboarding_get_paid.svg',
preview: _PreviewRow(label: 'Paid 26 Aug', trailing: StatusChip('On time')),
),
];
/// A miniature shift card, matching the one used throughout the app: identity
/// rail down the side, role and venue stacked.
class _PreviewCard extends StatelessWidget {
const _PreviewCard({
required this.accent,
required this.title,
required this.subtitle,
});
final Color accent;
final String title;
final String subtitle;
@override
Widget build(BuildContext context) {
return Container(
width: 218,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(14),
boxShadow: [
BoxShadow(
color: KrowPalette.blueDeep.withValues(alpha: 0.35),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
clipBehavior: Clip.antiAlias,
child: Row(
children: [
Container(width: 6, height: 62, color: accent),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 11, 12, 11),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
letterSpacing: -0.3,
),
),
const SizedBox(height: 2),
Text(
subtitle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 11.5,
color: KrowPalette.mute,
),
),
],
),
),
),
],
),
);
}
}
/// A single floated row: a label and a figure or status.
class _PreviewRow extends StatelessWidget {
const _PreviewRow({required this.label, required this.trailing});
final String label;
final Widget trailing;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 11),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(14),
boxShadow: [
BoxShadow(
color: KrowPalette.blueDeep.withValues(alpha: 0.35),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: const TextStyle(fontSize: 12.5, fontWeight: FontWeight.w600),
),
const SizedBox(width: 14),
trailing,
],
),
);
}
}
class OnboardingScreen extends ConsumerStatefulWidget {
const OnboardingScreen({super.key});
@@ -156,10 +276,7 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
super.dispose();
}
void _finish() {
ref.read(sessionProvider.notifier).completeOnboarding();
context.go('/welcome');
}
void _finish() => context.go('/welcome');
@override
Widget build(BuildContext context) {
@@ -175,7 +292,7 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const KrowWordmark(size: 20),
const KrowWordmark(width: 66),
TextButton(
onPressed: _finish,
style: TextButton.styleFrom(
@@ -194,20 +311,37 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
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,
// Artwork behind, with a real piece of the app floated over
// the bottom-right of it — the prototype's hero layout.
return Stack(
fit: StackFit.expand,
children: [
// Cropped rather than letterboxed, so the scene fills the
// hero on any aspect ratio the way the prototype does.
SvgPicture.asset(
slide.art,
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
child: Icon(
slide.icon,
size: 76,
color: KrowPalette.yellow,
// Veil: darkens the foot of the artwork so the floated
// card and the sheet below it keep their edges.
const Positioned(
left: 0,
right: 0,
bottom: 0,
height: 140,
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0x0022366F), Color(0xF022366F)],
),
),
),
),
),
Positioned(right: 20, bottom: 24, child: slide.preview),
],
);
},
),
@@ -322,7 +456,7 @@ class WelcomeScreen extends StatelessWidget {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const KrowWordmark(size: 40),
const KrowWordmark(width: 150),
const SizedBox(height: 34),
const Text(
'Work the shifts\nyou actually want.',