fixed fonts and colors

This commit is contained in:
Deep Koluguri 2025-11-06 12:58:51 -05:00
parent 1b1ead0c11
commit 12d5968373
1 changed files with 177 additions and 89 deletions

View File

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