From 12d596837380b9e167eedb9749568e0c7fe751f6 Mon Sep 17 00:00:00 2001 From: Deep Koluguri Date: Thu, 6 Nov 2025 12:58:51 -0500 Subject: [PATCH] fixed fonts and colors --- luckychit/lib/core/themes/app_theme.dart | 266 +++++++++++++++-------- 1 file changed, 177 insertions(+), 89 deletions(-) diff --git a/luckychit/lib/core/themes/app_theme.dart b/luckychit/lib/core/themes/app_theme.dart index 13a104d..9900d0c 100644 --- a/luckychit/lib/core/themes/app_theme.dart +++ b/luckychit/lib/core/themes/app_theme.dart @@ -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); + // ACCESSIBILITY: Larger font size multiplier for elderly users (50+) + 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 accentBlue = Color(0xFF1976D2); - static const Color accentOrange = Color(0xFFF57C00); - static const Color accentRed = Color(0xFFD32F2F); + 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 - static const Color lightBackground = Color(0xFFFAFAFA); + // 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, ), ),