Zahar
8d69c9c846
Introduce StartRouter to gate first run with onboarding. Persist state in SharedPreferences (onboarded_v1). Add WelcomeScreen, a 3-step OnboardingFlow, and a SignInScreen placeholder with Apple/Google buttons and "coming soon" toasts plus continue as guest. Apply new AppThemes (light/dark, high-contrast option) built from design tokens and wire into MaterialApp (theme/darkTheme, system mode). Add ThemeProvider to persist ThemeMode and high-contrast flags (not yet hooked into the tree). Add EN/MS i18n strings for welcome, onboarding, auth, and CTAs. Include assets/tokens/design-tokens.json for design tooling parity.
347 lines
13 KiB
Dart
347 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Design tokens and themes for FixMate (Civic Pro Minimal)
|
|
class AppColors {
|
|
static const Color brandPrimary = Color(0xFF1E5CE0);
|
|
static const Color brandPrimaryDark = Color(0xFF1748AC);
|
|
static const Color brandPrimaryLight = Color(0xFF8CB0FF);
|
|
|
|
static const Color neutral0 = Color(0xFFFFFFFF);
|
|
static const Color neutral10 = Color(0xFFF5F7FB);
|
|
static const Color neutral20 = Color(0xFFE9EDF5);
|
|
static const Color neutral30 = Color(0xFFD8DFEB);
|
|
static const Color neutral40 = Color(0xFFB8C2D5);
|
|
static const Color neutral50 = Color(0xFF99A3B8);
|
|
static const Color neutral60 = Color(0xFF7A859E);
|
|
static const Color neutral70 = Color(0xFF5C6782);
|
|
static const Color neutral80 = Color(0xFF3D4765);
|
|
static const Color neutral90 = Color(0xFF21283C);
|
|
static const Color neutral100 = Color(0xFF0E1322);
|
|
|
|
static const Color success = Color(0xFF2E7D32);
|
|
static const Color warning = Color(0xFFED6C02);
|
|
static const Color error = Color(0xFFD32F2F);
|
|
static const Color info = Color(0xFF0288D1);
|
|
}
|
|
|
|
class AppRadii {
|
|
static const double xs = 6;
|
|
static const double sm = 8;
|
|
static const double md = 12;
|
|
static const double lg = 16;
|
|
static const double xl = 24;
|
|
static const double pill = 100;
|
|
}
|
|
|
|
class AppSpacing {
|
|
static const double x1 = 4;
|
|
static const double x2 = 8;
|
|
static const double x3 = 12;
|
|
static const double x4 = 16;
|
|
static const double x5 = 20;
|
|
static const double x6 = 24;
|
|
static const double x8 = 32;
|
|
static const double x10 = 40;
|
|
static const double x12 = 48;
|
|
static const double x16 = 64;
|
|
}
|
|
|
|
class AppMotion {
|
|
static const Duration fast = Duration(milliseconds: 120);
|
|
static const Duration medium = Duration(milliseconds: 200);
|
|
static const Duration slow = Duration(milliseconds: 300);
|
|
static const Duration slower = Duration(milliseconds: 450);
|
|
|
|
static const Curve standard = Curves.easeOutCubic;
|
|
static const Curve accelerate = Curves.easeInCubic;
|
|
static const Curve decelerate = Curves.easeOutCubic;
|
|
static const Curve emphasize = Cubic(0.2, 0.0, 0.0, 1.0);
|
|
}
|
|
|
|
class AppThemes {
|
|
static const PageTransitionsTheme transitions = PageTransitionsTheme(
|
|
builders: {
|
|
TargetPlatform.android: ZoomPageTransitionsBuilder(),
|
|
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
|
|
TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
|
|
TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
|
|
TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(),
|
|
},
|
|
);
|
|
|
|
static ThemeData light() {
|
|
final colorScheme = ColorScheme.fromSeed(
|
|
seedColor: AppColors.brandPrimary,
|
|
brightness: Brightness.light,
|
|
primary: AppColors.brandPrimary,
|
|
);
|
|
|
|
return ThemeData(
|
|
useMaterial3: true,
|
|
colorScheme: colorScheme,
|
|
scaffoldBackgroundColor: AppColors.neutral10,
|
|
canvasColor: AppColors.neutral10,
|
|
appBarTheme: AppBarTheme(
|
|
backgroundColor: colorScheme.surface,
|
|
foregroundColor: colorScheme.onSurface,
|
|
elevation: 0,
|
|
centerTitle: false,
|
|
titleTextStyle: TextStyle(
|
|
color: colorScheme.onSurface,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: colorScheme.primary,
|
|
foregroundColor: colorScheme.onPrimary,
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
|
textStyle: const TextStyle(fontWeight: FontWeight.w600),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
),
|
|
outlinedButtonTheme: OutlinedButtonThemeData(
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: colorScheme.primary,
|
|
side: BorderSide(color: colorScheme.primary, width: 1.2),
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
),
|
|
textButtonTheme: TextButtonThemeData(
|
|
style: TextButton.styleFrom(
|
|
foregroundColor: colorScheme.primary,
|
|
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.md),
|
|
),
|
|
),
|
|
),
|
|
inputDecorationTheme: InputDecorationTheme(
|
|
filled: true,
|
|
fillColor: colorScheme.surfaceVariant.withOpacity(0.5),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: AppColors.neutral30),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: AppColors.neutral30),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: colorScheme.primary, width: 1.6),
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
vertical: AppSpacing.x4,
|
|
horizontal: AppSpacing.x4,
|
|
),
|
|
),
|
|
cardTheme: CardThemeData(
|
|
color: colorScheme.surface,
|
|
elevation: 1,
|
|
margin: const EdgeInsets.all(0),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
chipTheme: ChipThemeData(
|
|
backgroundColor: colorScheme.surfaceVariant,
|
|
selectedColor: colorScheme.primary.withOpacity(0.14),
|
|
secondarySelectedColor: colorScheme.primary.withOpacity(0.14),
|
|
labelStyle: TextStyle(color: colorScheme.onSurface),
|
|
secondaryLabelStyle: TextStyle(color: colorScheme.onSurface),
|
|
brightness: Brightness.light,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.md),
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
),
|
|
dialogTheme: DialogThemeData(
|
|
backgroundColor: colorScheme.surface,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.xl),
|
|
),
|
|
),
|
|
snackBarTheme: SnackBarThemeData(
|
|
backgroundColor: AppColors.neutral90,
|
|
contentTextStyle: const TextStyle(color: Colors.white),
|
|
behavior: SnackBarBehavior.floating,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
|
backgroundColor: colorScheme.surface,
|
|
selectedItemColor: colorScheme.primary,
|
|
unselectedItemColor: AppColors.neutral60,
|
|
type: BottomNavigationBarType.fixed,
|
|
selectedLabelStyle: const TextStyle(fontWeight: FontWeight.w600),
|
|
),
|
|
pageTransitionsTheme: transitions,
|
|
visualDensity: VisualDensity.standard,
|
|
);
|
|
}
|
|
|
|
static ThemeData dark() {
|
|
final colorScheme = ColorScheme.fromSeed(
|
|
seedColor: AppColors.brandPrimary,
|
|
brightness: Brightness.dark,
|
|
primary: AppColors.brandPrimaryLight,
|
|
);
|
|
|
|
return ThemeData(
|
|
useMaterial3: true,
|
|
colorScheme: colorScheme,
|
|
scaffoldBackgroundColor: AppColors.neutral100,
|
|
canvasColor: AppColors.neutral100,
|
|
appBarTheme: AppBarTheme(
|
|
backgroundColor: colorScheme.surface,
|
|
foregroundColor: colorScheme.onSurface,
|
|
elevation: 0,
|
|
centerTitle: false,
|
|
titleTextStyle: TextStyle(
|
|
color: colorScheme.onSurface,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: colorScheme.primary,
|
|
foregroundColor: colorScheme.onPrimary,
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
|
textStyle: const TextStyle(fontWeight: FontWeight.w600),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
),
|
|
outlinedButtonTheme: OutlinedButtonThemeData(
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: colorScheme.primary,
|
|
side: BorderSide(color: colorScheme.primary, width: 1.2),
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
),
|
|
inputDecorationTheme: InputDecorationTheme(
|
|
filled: true,
|
|
fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: AppColors.neutral80),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: AppColors.neutral80),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: colorScheme.primary, width: 1.6),
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
vertical: AppSpacing.x4,
|
|
horizontal: AppSpacing.x4,
|
|
),
|
|
),
|
|
cardTheme: CardThemeData(
|
|
color: colorScheme.surface,
|
|
elevation: 1,
|
|
margin: const EdgeInsets.all(0),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
chipTheme: ChipThemeData(
|
|
backgroundColor: colorScheme.surfaceVariant.withOpacity(0.5),
|
|
selectedColor: colorScheme.primary.withOpacity(0.22),
|
|
secondarySelectedColor: colorScheme.primary.withOpacity(0.22),
|
|
labelStyle: TextStyle(color: colorScheme.onSurface),
|
|
secondaryLabelStyle: TextStyle(color: colorScheme.onSurface),
|
|
brightness: Brightness.dark,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.md),
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
),
|
|
dialogTheme: DialogThemeData(
|
|
backgroundColor: colorScheme.surface,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.xl),
|
|
),
|
|
),
|
|
snackBarTheme: SnackBarThemeData(
|
|
backgroundColor: AppColors.neutral90,
|
|
contentTextStyle: const TextStyle(color: Colors.white),
|
|
behavior: SnackBarBehavior.floating,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
),
|
|
),
|
|
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
|
backgroundColor: colorScheme.surface,
|
|
selectedItemColor: colorScheme.primary,
|
|
unselectedItemColor: AppColors.neutral60,
|
|
type: BottomNavigationBarType.fixed,
|
|
selectedLabelStyle: const TextStyle(fontWeight: FontWeight.w600),
|
|
),
|
|
pageTransitionsTheme: transitions,
|
|
visualDensity: VisualDensity.standard,
|
|
);
|
|
}
|
|
|
|
static ThemeData highContrast() {
|
|
// High-contrast light theme with stronger borders and higher on-color contrast
|
|
final base = light();
|
|
final cs = base.colorScheme;
|
|
final highCs = cs.copyWith(
|
|
primary: AppColors.brandPrimaryDark,
|
|
onPrimary: Colors.white,
|
|
surface: AppColors.neutral0,
|
|
onSurface: AppColors.neutral100,
|
|
surfaceTint: Colors.transparent,
|
|
);
|
|
return base.copyWith(
|
|
colorScheme: highCs,
|
|
inputDecorationTheme: base.inputDecorationTheme.copyWith(
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: AppColors.neutral80, width: 2),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: AppColors.neutral80, width: 2),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppRadii.lg),
|
|
borderSide: BorderSide(color: highCs.primary, width: 2.2),
|
|
),
|
|
),
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: highCs.primary,
|
|
foregroundColor: highCs.onPrimary,
|
|
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 18),
|
|
textStyle: const TextStyle(fontWeight: FontWeight.w700),
|
|
),
|
|
),
|
|
outlinedButtonTheme: OutlinedButtonThemeData(
|
|
style: OutlinedButton.styleFrom(
|
|
side: BorderSide(color: highCs.primary, width: 2),
|
|
),
|
|
),
|
|
snackBarTheme: base.snackBarTheme.copyWith(
|
|
backgroundColor: Colors.black,
|
|
contentTextStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700),
|
|
),
|
|
);
|
|
}
|
|
} |