fixed fonts and colors
This commit is contained in:
parent
1b1ead0c11
commit
12d5968373
|
|
@ -2,24 +2,31 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
|
||||
class AppTheme {
|
||||
// Brand Colors
|
||||
static const Color primaryGreen = Color(0xFF2E7D32);
|
||||
static const Color primaryGold = Color(0xFFFFD700);
|
||||
static const Color accentBlue = Color(0xFF1976D2);
|
||||
static const Color accentOrange = Color(0xFFF57C00);
|
||||
static const Color accentRed = Color(0xFFD32F2F);
|
||||
// ACCESSIBILITY: Larger font size multiplier for elderly users (50+)
|
||||
static const double fontSizeMultiplier = 1.3; // 30% larger fonts
|
||||
|
||||
// Light Theme Colors
|
||||
static const Color lightBackground = Color(0xFFFAFAFA);
|
||||
// Brand Colors - Enhanced for better contrast
|
||||
static const Color primaryGreen = Color(0xFF2E7D32); // Dark green for contrast
|
||||
static const Color primaryGold = Color(0xFFFFD700);
|
||||
static const Color accentBlue = Color(0xFF1565C0); // Darker blue for better contrast
|
||||
static const Color accentOrange = Color(0xFFE65100); // Darker orange for better contrast
|
||||
static const Color accentRed = Color(0xFFC62828); // Darker red for better contrast
|
||||
|
||||
// Light Theme Colors - High Contrast
|
||||
static const Color lightBackground = Color(0xFFFFFFFF); // Pure white for maximum contrast
|
||||
static const Color lightSurface = Color(0xFFFFFFFF);
|
||||
static const Color lightPrimary = primaryGreen;
|
||||
static const Color lightOnPrimary = Color(0xFFFFFFFF);
|
||||
static const Color lightTextPrimary = Color(0xFF000000); // Pure black text
|
||||
static const Color lightTextSecondary = Color(0xFF424242); // Dark grey, still readable
|
||||
|
||||
// Dark Theme Colors
|
||||
static const Color darkBackground = Color(0xFF121212);
|
||||
static const Color darkSurface = Color(0xFF1E1E1E);
|
||||
static const Color darkPrimary = Color(0xFF4CAF50);
|
||||
// Dark Theme Colors - High Contrast
|
||||
static const Color darkBackground = Color(0xFF000000); // Pure black for maximum contrast
|
||||
static const Color darkSurface = Color(0xFF121212);
|
||||
static const Color darkPrimary = Color(0xFF66BB6A); // Brighter green for dark mode
|
||||
static const Color darkOnPrimary = Color(0xFF000000);
|
||||
static const Color darkTextPrimary = Color(0xFFFFFFFF); // Pure white text
|
||||
static const Color darkTextSecondary = Color(0xFFE0E0E0); // Light grey, still readable
|
||||
|
||||
/// Light Theme
|
||||
static ThemeData get lightTheme {
|
||||
|
|
@ -42,105 +49,132 @@ class AppTheme {
|
|||
onError: Colors.white,
|
||||
),
|
||||
|
||||
// AppBar Theme
|
||||
// AppBar Theme - Accessibility Enhanced
|
||||
appBarTheme: AppBarTheme(
|
||||
elevation: 2,
|
||||
elevation: 3, // More elevation for better definition
|
||||
centerTitle: false,
|
||||
backgroundColor: lightPrimary,
|
||||
foregroundColor: Colors.white,
|
||||
titleTextStyle: TextStyle(
|
||||
fontSize: 18.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (20.sp * fontSizeMultiplier), // Larger title
|
||||
fontWeight: FontWeight.bold, // Bolder for better readability
|
||||
color: Colors.white,
|
||||
letterSpacing: 0.5, // Better spacing
|
||||
),
|
||||
iconTheme: IconThemeData(
|
||||
color: Colors.white,
|
||||
size: 24.w,
|
||||
size: (28.w * fontSizeMultiplier), // Larger icons
|
||||
),
|
||||
),
|
||||
|
||||
// Card Theme
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 2,
|
||||
color: lightSurface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
),
|
||||
color: lightSurface,
|
||||
margin: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
|
||||
),
|
||||
|
||||
// Elevated Button Theme
|
||||
// Elevated Button Theme - Accessibility Enhanced
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: lightPrimary,
|
||||
foregroundColor: lightOnPrimary,
|
||||
elevation: 2,
|
||||
padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
|
||||
elevation: 4, // More elevation for better depth perception
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: (28.w * fontSizeMultiplier), // Larger touch target
|
||||
vertical: (16.h * fontSizeMultiplier), // Taller buttons
|
||||
),
|
||||
minimumSize: Size(0, (52.h * fontSizeMultiplier)), // Minimum 50px height
|
||||
textStyle: TextStyle(
|
||||
fontSize: 16.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (18.sp * fontSizeMultiplier), // Larger text
|
||||
fontWeight: FontWeight.bold, // Bolder
|
||||
letterSpacing: 0.8, // Better spacing
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderRadius: BorderRadius.circular(16.r), // More rounded
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Outlined Button Theme
|
||||
// Outlined Button Theme - Accessibility Enhanced
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: lightPrimary,
|
||||
side: BorderSide(color: lightPrimary, width: 2),
|
||||
padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
|
||||
side: const BorderSide(color: lightPrimary, width: 3), // Thicker border
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: (28.w * fontSizeMultiplier),
|
||||
vertical: (16.h * fontSizeMultiplier),
|
||||
),
|
||||
minimumSize: Size(0, (52.h * fontSizeMultiplier)),
|
||||
textStyle: TextStyle(
|
||||
fontSize: 16.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (18.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Text Button Theme
|
||||
// Text Button Theme - Accessibility Enhanced
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: lightPrimary,
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: (20.w * fontSizeMultiplier),
|
||||
vertical: (14.h * fontSizeMultiplier),
|
||||
),
|
||||
minimumSize: Size(0, (48.h * fontSizeMultiplier)),
|
||||
textStyle: TextStyle(
|
||||
fontSize: 16.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (18.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Input Decoration Theme
|
||||
// Input Decoration Theme - Accessibility Enhanced
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: Colors.grey.shade50,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderSide: BorderSide(color: Colors.grey.shade300),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderSide: BorderSide(color: Colors.grey.shade400, width: 2), // Thicker border
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderSide: BorderSide(color: Colors.grey.shade300),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderSide: BorderSide(color: Colors.grey.shade400, width: 2),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderSide: const BorderSide(color: lightPrimary, width: 2),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderSide: const BorderSide(color: lightPrimary, width: 3), // Thicker focus border
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderSide: const BorderSide(color: accentRed, width: 2),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderSide: const BorderSide(color: accentRed, width: 3),
|
||||
),
|
||||
contentPadding: EdgeInsets.symmetric(
|
||||
horizontal: (20.w * fontSizeMultiplier),
|
||||
vertical: (18.h * fontSizeMultiplier), // More padding
|
||||
),
|
||||
labelStyle: TextStyle(
|
||||
fontSize: (17.sp * fontSizeMultiplier), // Larger labels
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
hintStyle: TextStyle(
|
||||
fontSize: (17.sp * fontSizeMultiplier),
|
||||
color: Colors.grey.shade600,
|
||||
),
|
||||
contentPadding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
|
||||
),
|
||||
|
||||
// Icon Theme
|
||||
// Icon Theme - Accessibility Enhanced
|
||||
iconTheme: IconThemeData(
|
||||
color: Colors.grey.shade700,
|
||||
size: 24.w,
|
||||
color: Colors.grey.shade800, // Darker for better contrast
|
||||
size: (28.w * fontSizeMultiplier), // Larger icons
|
||||
),
|
||||
|
||||
// Floating Action Button Theme
|
||||
|
|
@ -153,51 +187,84 @@ class AppTheme {
|
|||
),
|
||||
),
|
||||
|
||||
// Bottom Navigation Bar Theme
|
||||
// Bottom Navigation Bar Theme - Accessibility Enhanced
|
||||
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
||||
backgroundColor: lightSurface,
|
||||
selectedItemColor: lightPrimary,
|
||||
unselectedItemColor: Colors.grey.shade600,
|
||||
selectedLabelStyle: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.w600),
|
||||
unselectedLabelStyle: TextStyle(fontSize: 12.sp),
|
||||
unselectedItemColor: Colors.grey.shade700, // Darker for better contrast
|
||||
selectedLabelStyle: TextStyle(
|
||||
fontSize: (15.sp * fontSizeMultiplier), // Larger labels
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
unselectedLabelStyle: TextStyle(
|
||||
fontSize: (14.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
selectedIconTheme: IconThemeData(
|
||||
size: (32.w * fontSizeMultiplier), // Larger icons
|
||||
),
|
||||
unselectedIconTheme: IconThemeData(
|
||||
size: (28.w * fontSizeMultiplier),
|
||||
),
|
||||
type: BottomNavigationBarType.fixed,
|
||||
elevation: 8,
|
||||
),
|
||||
|
||||
// Divider Theme
|
||||
// Divider Theme - Accessibility Enhanced
|
||||
dividerTheme: DividerThemeData(
|
||||
color: Colors.grey.shade300,
|
||||
thickness: 1,
|
||||
space: 1,
|
||||
color: Colors.grey.shade400, // Darker for better visibility
|
||||
thickness: 2, // Thicker for better visibility
|
||||
space: 2,
|
||||
),
|
||||
|
||||
// Chip Theme
|
||||
// Chip Theme - Accessibility Enhanced
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: Colors.grey.shade200,
|
||||
selectedColor: lightPrimary.withOpacity(0.2),
|
||||
labelStyle: TextStyle(fontSize: 14.sp),
|
||||
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
|
||||
labelStyle: TextStyle(
|
||||
fontSize: (16.sp * fontSizeMultiplier), // Larger text
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: (16.w * fontSizeMultiplier),
|
||||
vertical: (12.h * fontSizeMultiplier),
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderRadius: BorderRadius.circular(20.r),
|
||||
),
|
||||
),
|
||||
|
||||
// Dialog Theme
|
||||
// Dialog Theme - Accessibility Enhanced
|
||||
dialogTheme: DialogThemeData(
|
||||
elevation: 4,
|
||||
elevation: 8, // More elevation for better depth
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderRadius: BorderRadius.circular(20.r),
|
||||
),
|
||||
titleTextStyle: TextStyle(
|
||||
fontSize: (22.sp * fontSizeMultiplier), // Larger titles
|
||||
fontWeight: FontWeight.bold,
|
||||
color: lightTextPrimary,
|
||||
),
|
||||
contentTextStyle: TextStyle(
|
||||
fontSize: (17.sp * fontSizeMultiplier), // Larger content
|
||||
color: lightTextSecondary,
|
||||
height: 1.5, // Better line spacing
|
||||
),
|
||||
),
|
||||
|
||||
// Snackbar Theme
|
||||
// Snackbar Theme - Accessibility Enhanced
|
||||
snackBarTheme: SnackBarThemeData(
|
||||
backgroundColor: Colors.grey.shade800,
|
||||
contentTextStyle: TextStyle(fontSize: 14.sp, color: Colors.white),
|
||||
backgroundColor: Colors.grey.shade900, // Darker for better contrast
|
||||
contentTextStyle: TextStyle(
|
||||
fontSize: (17.sp * fontSizeMultiplier), // Larger text
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
actionTextColor: primaryGold, // High contrast action color
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
@ -223,62 +290,73 @@ class AppTheme {
|
|||
onError: Colors.white,
|
||||
),
|
||||
|
||||
// AppBar Theme
|
||||
// AppBar Theme - Accessibility Enhanced
|
||||
appBarTheme: AppBarTheme(
|
||||
elevation: 0,
|
||||
elevation: 3,
|
||||
centerTitle: false,
|
||||
backgroundColor: darkSurface,
|
||||
foregroundColor: Colors.white,
|
||||
titleTextStyle: TextStyle(
|
||||
fontSize: 18.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (20.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
iconTheme: IconThemeData(
|
||||
color: Colors.white,
|
||||
size: 24.w,
|
||||
size: (28.w * fontSizeMultiplier),
|
||||
),
|
||||
),
|
||||
|
||||
// Card Theme
|
||||
// Card Theme - Accessibility Enhanced
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 4,
|
||||
elevation: 6, // More elevation for better depth in dark mode
|
||||
color: darkSurface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
),
|
||||
color: darkSurface,
|
||||
margin: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
|
||||
margin: EdgeInsets.symmetric(horizontal: 8.w, vertical: 6.h), // More spacing
|
||||
),
|
||||
|
||||
// Elevated Button Theme
|
||||
// Elevated Button Theme - Accessibility Enhanced
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: darkPrimary,
|
||||
foregroundColor: darkOnPrimary,
|
||||
elevation: 2,
|
||||
padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
|
||||
elevation: 4,
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: (28.w * fontSizeMultiplier),
|
||||
vertical: (16.h * fontSizeMultiplier),
|
||||
),
|
||||
minimumSize: Size(0, (52.h * fontSizeMultiplier)),
|
||||
textStyle: TextStyle(
|
||||
fontSize: 16.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (18.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Outlined Button Theme
|
||||
// Outlined Button Theme - Accessibility Enhanced
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: darkPrimary,
|
||||
side: BorderSide(color: darkPrimary, width: 2),
|
||||
padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
|
||||
side: BorderSide(color: darkPrimary, width: 3), // Thicker border
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: (28.w * fontSizeMultiplier),
|
||||
vertical: (16.h * fontSizeMultiplier),
|
||||
),
|
||||
minimumSize: Size(0, (52.h * fontSizeMultiplier)),
|
||||
textStyle: TextStyle(
|
||||
fontSize: 16.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (18.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12.r),
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -363,12 +441,22 @@ class AppTheme {
|
|||
),
|
||||
),
|
||||
|
||||
// Dialog Theme
|
||||
// Dialog Theme - Accessibility Enhanced
|
||||
dialogTheme: DialogThemeData(
|
||||
backgroundColor: darkSurface,
|
||||
elevation: 4,
|
||||
elevation: 8, // More elevation
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.r),
|
||||
borderRadius: BorderRadius.circular(20.r),
|
||||
),
|
||||
titleTextStyle: TextStyle(
|
||||
fontSize: (22.sp * fontSizeMultiplier),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: darkTextPrimary,
|
||||
),
|
||||
contentTextStyle: TextStyle(
|
||||
fontSize: (17.sp * fontSizeMultiplier),
|
||||
color: darkTextSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue