Modificação nos modos, correção de textos cortados
This commit is contained in:
@@ -1,111 +1,90 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// EPVC School Color Palette - New Color Scheme with Light/Dark Mode Support
|
||||
/// EPVC School Color Palette - Light/Dark Mode Support
|
||||
class AppColors {
|
||||
// Primary Brand Colors (same for both modes)
|
||||
static const Color primaryTeal = Color(
|
||||
0xFF82C9BD,
|
||||
); // Main teal color - PRIMARY
|
||||
static const Color primaryOrange = Color(
|
||||
0xFFF68D2D,
|
||||
); // Accent orange - SECONDARY
|
||||
// Primary Brand Colors (light mode)
|
||||
static const Color primaryTeal = Color(0xFF82C9BD);
|
||||
static const Color primaryOrange = Color(0xFFF68D2D);
|
||||
|
||||
// Gradient Colors (same for both modes)
|
||||
static const Color gradientStart = Color(0xFF82C9BD); // Teal gradient start
|
||||
static const Color gradientEnd = Color(
|
||||
0xFF6AB8A8,
|
||||
); // Darker teal gradient end
|
||||
// Gradient Colors (light mode)
|
||||
static const Color gradientStart = Color(0xFF82C9BD);
|
||||
static const Color gradientEnd = Color(0xFF6AB8A8);
|
||||
|
||||
// Secondary Colors (same for both modes)
|
||||
static const Color secondaryTeal = Color(0xFF6AB8A8); // Darker teal
|
||||
static const Color accentTeal = Color(0xFF5AA69A); // Lighter teal accent
|
||||
static const Color lightOrange = Color(0xFFF7A960); // Lighter orange
|
||||
// Secondary Colors (light mode)
|
||||
static const Color secondaryTeal = Color(0xFF6AB8A8);
|
||||
static const Color accentTeal = Color(0xFF5AA69A);
|
||||
static const Color lightOrange = Color(0xFFF7A960);
|
||||
|
||||
// Status Colors (same for both modes)
|
||||
static const Color success = Color(0xFF10B981); // Green for success
|
||||
static const Color warning = Color(0xFFF59E0B); // Amber for warnings
|
||||
static const Color error = Color(0xFFEF4444); // Red for errors
|
||||
static const Color info = Color(0xFF3B82F6); // Blue for info
|
||||
// Status Colors (shared)
|
||||
static const Color success = Color(0xFF10B981);
|
||||
static const Color warning = Color(0xFFF59E0B);
|
||||
static const Color error = Color(0xFFEF4444);
|
||||
static const Color info = Color(0xFF3B82F6);
|
||||
|
||||
// Legacy compatibility (for existing code)
|
||||
@deprecated
|
||||
static const Color primaryBlue = primaryTeal; // Map old primaryBlue to new primaryTeal
|
||||
@Deprecated('Use AppColors.primaryTeal')
|
||||
static const Color primaryBlue = primaryTeal;
|
||||
}
|
||||
|
||||
/// Brand colors tuned for dark mode (lower luminance, same hue family).
|
||||
class DarkBrandColors {
|
||||
static const Color primaryTeal = Color(0xFF4D8F84);
|
||||
static const Color primaryOrange = Color(0xFFC47A2A);
|
||||
static const Color gradientStart = Color(0xFF3D7A70);
|
||||
static const Color gradientEnd = Color(0xFF2F635C);
|
||||
static const Color secondaryTeal = Color(0xFF3D7A70);
|
||||
static const Color accentTeal = Color(0xFF356B62);
|
||||
}
|
||||
|
||||
/// Light Mode Colors
|
||||
class LightColors {
|
||||
// Neutral Colors
|
||||
static const Color background = Color(0xFFF8F9FA); // Light gray background
|
||||
static const Color surface = Color(0xFFFFFFFF); // White surfaces
|
||||
static const Color cardBackground = Color(0xFFFFFFFF); // White cards
|
||||
static const Color background = Color(0xFFF8F9FA);
|
||||
static const Color surface = Color(0xFFFFFFFF);
|
||||
static const Color surfaceVariant = Color(0xFFF3F4F6);
|
||||
static const Color cardBackground = Color(0xFFFFFFFF);
|
||||
|
||||
// Text Colors
|
||||
static const Color textPrimary = Color(0xFF1A1A1A); // Primary text
|
||||
static const Color textSecondary = Color(0xFF6B7280); // Secondary text
|
||||
static const Color textHint = Color(0xFF9CA3AF); // Hint text
|
||||
static const Color textPrimary = Color(0xFF1A1A1A);
|
||||
static const Color textSecondary = Color(0xFF6B7280);
|
||||
static const Color textHint = Color(0xFF9CA3AF);
|
||||
|
||||
// Interactive Colors
|
||||
static const Color buttonPrimary =
|
||||
AppColors.primaryTeal; // Primary button (teal)
|
||||
static const Color buttonAccent =
|
||||
AppColors.primaryOrange; // Accent button (orange)
|
||||
static const Color buttonSecondary = Color(0xFFE5E7EB); // Secondary button
|
||||
static const Color iconActive = AppColors.primaryTeal; // Active icons (teal)
|
||||
static const Color iconInactive = Color(0xFF9CA3AF); // Inactive icons
|
||||
static const Color buttonPrimary = AppColors.primaryTeal;
|
||||
static const Color buttonAccent = AppColors.primaryOrange;
|
||||
static const Color buttonSecondary = Color(0xFFE5E7EB);
|
||||
static const Color iconActive = AppColors.primaryTeal;
|
||||
static const Color iconInactive = Color(0xFF9CA3AF);
|
||||
|
||||
// Chat Specific Colors
|
||||
static const Color chatBubbleStudent =
|
||||
AppColors.primaryTeal; // Student messages (teal)
|
||||
static const Color chatBubbleAI = Color(0xFFF3F4F6); // AI messages
|
||||
static const Color chatInputBackground = Color(
|
||||
0xFFF8F9FA,
|
||||
); // Input background
|
||||
static const Color chatSendButton =
|
||||
AppColors.primaryTeal; // Send button (teal)
|
||||
static const Color chatBubbleStudent = AppColors.primaryTeal;
|
||||
static const Color chatBubbleAI = Color(0xFFF3F4F6);
|
||||
static const Color chatInputBackground = Color(0xFFF8F9FA);
|
||||
static const Color chatSendButton = AppColors.primaryTeal;
|
||||
|
||||
// Border Colors
|
||||
static const Color border = Color(0xFFE2E8F0); // Border color
|
||||
static const Color divider = Color(0xFFE5E7EB); // Divider color
|
||||
|
||||
// Overlay Colors
|
||||
static const Color overlay = Color(0x80000000); // Overlay color
|
||||
static const Color border = Color(0xFFE2E8F0);
|
||||
static const Color divider = Color(0xFFE5E7EB);
|
||||
static const Color overlay = Color(0x80000000);
|
||||
}
|
||||
|
||||
/// Dark Mode Colors
|
||||
class DarkColors {
|
||||
// Neutral Colors
|
||||
static const Color background = Color(0xFF1F2937); // Dark background
|
||||
static const Color surface = Color(0xFF374151); // Dark surface
|
||||
static const Color cardBackground = Color(0xFF374151); // Dark cards
|
||||
static const Color background = Color(0xFF0F1218);
|
||||
static const Color surface = Color(0xFF1A2332);
|
||||
static const Color surfaceVariant = Color(0xFF243044);
|
||||
static const Color cardBackground = Color(0xFF1A2332);
|
||||
|
||||
// Text Colors
|
||||
static const Color textPrimary = Color(0xFFF9FAFB); // Dark primary text
|
||||
static const Color textSecondary = Color(0xFFD1D5DB); // Dark secondary text
|
||||
static const Color textHint = Color(0xFF9CA3AF); // Hint text
|
||||
static const Color textPrimary = Color(0xFFF9FAFB);
|
||||
static const Color textSecondary = Color(0xFFD1D5DB);
|
||||
static const Color textHint = Color(0xFF9CA3AF);
|
||||
|
||||
// Interactive Colors
|
||||
static const Color buttonPrimary =
|
||||
AppColors.primaryTeal; // Primary button (teal)
|
||||
static const Color buttonAccent =
|
||||
AppColors.primaryOrange; // Accent button (orange)
|
||||
static const Color buttonSecondary = Color(0xFF4B5563); // Secondary button
|
||||
static const Color iconActive = AppColors.primaryTeal; // Active icons (teal)
|
||||
static const Color iconInactive = Color(0xFF6B7280); // Inactive icons
|
||||
static const Color buttonPrimary = DarkBrandColors.primaryTeal;
|
||||
static const Color buttonAccent = DarkBrandColors.primaryOrange;
|
||||
static const Color buttonSecondary = Color(0xFF2D3A4D);
|
||||
static const Color iconActive = DarkBrandColors.primaryTeal;
|
||||
static const Color iconInactive = Color(0xFF6B7280);
|
||||
|
||||
// Chat Specific Colors
|
||||
static const Color chatBubbleStudent =
|
||||
AppColors.primaryTeal; // Student messages (teal)
|
||||
static const Color chatBubbleAI = Color(0xFF4B5563); // AI messages (darker)
|
||||
static const Color chatInputBackground = Color(
|
||||
0xFF374151,
|
||||
); // Input background
|
||||
static const Color chatSendButton =
|
||||
AppColors.primaryTeal; // Send button (teal)
|
||||
static const Color chatBubbleStudent = DarkBrandColors.primaryTeal;
|
||||
static const Color chatBubbleAI = Color(0xFF243044);
|
||||
static const Color chatInputBackground = Color(0xFF1A2332);
|
||||
static const Color chatSendButton = DarkBrandColors.primaryTeal;
|
||||
|
||||
// Border Colors
|
||||
static const Color border = Color(0xFF4B5563); // Border color
|
||||
static const Color divider = Color(0xFF4B5563); // Divider color
|
||||
|
||||
// Overlay Colors
|
||||
static const Color overlay = Color(0x80000000); // Overlay color
|
||||
static const Color border = Color(0xFF2D3A4D);
|
||||
static const Color divider = Color(0xFF2D3A4D);
|
||||
static const Color overlay = Color(0x80000000);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'app_colors.dart';
|
||||
import 'app_theme_extension.dart';
|
||||
|
||||
/// Application Theme Configuration
|
||||
class AppTheme {
|
||||
@@ -12,11 +13,18 @@ class AppTheme {
|
||||
seedColor: AppColors.primaryTeal,
|
||||
brightness: Brightness.light,
|
||||
primary: AppColors.primaryTeal,
|
||||
onPrimary: Colors.white,
|
||||
secondary: AppColors.primaryOrange,
|
||||
onSecondary: Colors.white,
|
||||
surface: LightColors.surface,
|
||||
onSurface: LightColors.textPrimary,
|
||||
onSurfaceVariant: LightColors.textSecondary,
|
||||
surfaceContainerHighest: LightColors.surfaceVariant,
|
||||
background: LightColors.background,
|
||||
error: AppColors.error,
|
||||
),
|
||||
scaffoldBackgroundColor: LightColors.background,
|
||||
extensions: [AppThemeExtras.light],
|
||||
|
||||
// App Bar Theme
|
||||
appBarTheme: const AppBarTheme(
|
||||
@@ -256,17 +264,22 @@ class AppTheme {
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: AppColors.primaryTeal,
|
||||
brightness: Brightness.dark,
|
||||
primary: AppColors.primaryTeal,
|
||||
secondary: AppColors.primaryOrange,
|
||||
colorScheme: ColorScheme.dark(
|
||||
primary: DarkBrandColors.primaryTeal,
|
||||
onPrimary: Colors.white,
|
||||
secondary: DarkBrandColors.primaryOrange,
|
||||
onSecondary: Colors.white,
|
||||
surface: DarkColors.surface,
|
||||
onSurface: DarkColors.textPrimary,
|
||||
onSurfaceVariant: DarkColors.textSecondary,
|
||||
surfaceContainerHighest: DarkColors.surfaceVariant,
|
||||
surfaceContainerLow: DarkColors.background,
|
||||
background: DarkColors.background,
|
||||
error: AppColors.error,
|
||||
outline: DarkColors.border,
|
||||
),
|
||||
|
||||
// Dark mode specific overrides would go here
|
||||
scaffoldBackgroundColor: DarkColors.background,
|
||||
extensions: [AppThemeExtras.dark],
|
||||
appBarTheme: const AppBarTheme(
|
||||
backgroundColor: DarkColors.surface,
|
||||
foregroundColor: DarkColors.textPrimary,
|
||||
@@ -294,7 +307,7 @@ class AppTheme {
|
||||
backgroundColor: DarkColors.buttonPrimary,
|
||||
foregroundColor: Colors.white,
|
||||
elevation: 2,
|
||||
shadowColor: AppColors.primaryTeal.withOpacity(0.3),
|
||||
shadowColor: DarkBrandColors.primaryTeal.withOpacity(0.3),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
@@ -306,8 +319,10 @@ class AppTheme {
|
||||
// Outlined Button Theme for Dark Mode
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: AppColors.primaryTeal,
|
||||
side: BorderSide(color: AppColors.primaryTeal.withOpacity(0.3)),
|
||||
foregroundColor: DarkBrandColors.primaryTeal,
|
||||
side: BorderSide(
|
||||
color: DarkBrandColors.primaryTeal.withOpacity(0.3),
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
@@ -319,7 +334,7 @@ class AppTheme {
|
||||
// Text Button Theme for Dark Mode
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: AppColors.primaryTeal,
|
||||
foregroundColor: DarkBrandColors.primaryTeal,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
textStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
|
||||
@@ -332,15 +347,22 @@ class AppTheme {
|
||||
fillColor: DarkColors.surface,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(color: AppColors.primaryTeal.withOpacity(0.3)),
|
||||
borderSide: BorderSide(
|
||||
color: DarkBrandColors.primaryTeal.withOpacity(0.3),
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(color: AppColors.primaryTeal.withOpacity(0.3)),
|
||||
borderSide: BorderSide(
|
||||
color: DarkBrandColors.primaryTeal.withOpacity(0.3),
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(color: AppColors.primaryTeal, width: 2),
|
||||
borderSide: const BorderSide(
|
||||
color: DarkBrandColors.primaryTeal,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
@@ -363,9 +385,9 @@ class AppTheme {
|
||||
|
||||
// Text Field Theme for Dark Mode
|
||||
textSelectionTheme: TextSelectionThemeData(
|
||||
cursorColor: AppColors.primaryTeal,
|
||||
selectionColor: AppColors.primaryTeal.withOpacity(0.3),
|
||||
selectionHandleColor: AppColors.primaryTeal,
|
||||
cursorColor: DarkBrandColors.primaryTeal,
|
||||
selectionColor: DarkBrandColors.primaryTeal.withOpacity(0.3),
|
||||
selectionHandleColor: DarkBrandColors.primaryTeal,
|
||||
),
|
||||
|
||||
textTheme: const TextTheme(
|
||||
@@ -449,7 +471,7 @@ class AppTheme {
|
||||
// Bottom Navigation Bar Theme for Dark Mode
|
||||
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
|
||||
backgroundColor: DarkColors.surface,
|
||||
selectedItemColor: AppColors.primaryTeal,
|
||||
selectedItemColor: DarkBrandColors.primaryTeal,
|
||||
unselectedItemColor: DarkColors.iconInactive,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
elevation: 8,
|
||||
@@ -465,7 +487,7 @@ class AppTheme {
|
||||
|
||||
// Floating Action Button Theme for Dark Mode
|
||||
floatingActionButtonTheme: FloatingActionButtonThemeData(
|
||||
backgroundColor: AppColors.primaryTeal,
|
||||
backgroundColor: DarkBrandColors.primaryTeal,
|
||||
foregroundColor: Colors.white,
|
||||
elevation: 4,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
@@ -483,7 +505,7 @@ class AppTheme {
|
||||
|
||||
// Progress Indicator Theme for Dark Mode
|
||||
progressIndicatorTheme: const ProgressIndicatorThemeData(
|
||||
color: AppColors.primaryTeal,
|
||||
color: DarkBrandColors.primaryTeal,
|
||||
linearTrackColor: DarkColors.buttonSecondary,
|
||||
circularTrackColor: DarkColors.buttonSecondary,
|
||||
),
|
||||
@@ -491,7 +513,7 @@ class AppTheme {
|
||||
// Chip Theme for Dark Mode
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: DarkColors.buttonSecondary,
|
||||
selectedColor: AppColors.primaryTeal.withOpacity(0.1),
|
||||
selectedColor: DarkBrandColors.primaryTeal.withOpacity(0.1),
|
||||
disabledColor: DarkColors.buttonSecondary.withOpacity(0.5),
|
||||
labelStyle: const TextStyle(color: DarkColors.textPrimary),
|
||||
secondaryLabelStyle: const TextStyle(color: DarkColors.textPrimary),
|
||||
|
||||
106
lib/core/theme/app_theme_extension.dart
Normal file
106
lib/core/theme/app_theme_extension.dart
Normal file
@@ -0,0 +1,106 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'app_colors.dart';
|
||||
|
||||
/// Theme extension for gradients and colors not covered by [ColorScheme].
|
||||
@immutable
|
||||
class AppThemeExtras extends ThemeExtension<AppThemeExtras> {
|
||||
const AppThemeExtras({
|
||||
required this.dashboardBackgroundGradient,
|
||||
required this.dashboardGradientStops,
|
||||
required this.heroProgressStart,
|
||||
required this.heroProgressEnd,
|
||||
required this.actionCardGradientStart,
|
||||
required this.actionCardGradientEnd,
|
||||
required this.authBackgroundGradient,
|
||||
required this.dashboardHeaderTextColor,
|
||||
});
|
||||
|
||||
final List<Color> dashboardBackgroundGradient;
|
||||
final List<double> dashboardGradientStops;
|
||||
final Color heroProgressStart;
|
||||
final Color heroProgressEnd;
|
||||
final Color actionCardGradientStart;
|
||||
final Color actionCardGradientEnd;
|
||||
final List<Color> authBackgroundGradient;
|
||||
final Color dashboardHeaderTextColor;
|
||||
|
||||
static final AppThemeExtras light = AppThemeExtras(
|
||||
dashboardBackgroundGradient: [
|
||||
AppColors.primaryTeal,
|
||||
AppColors.primaryTeal.withValues(alpha: 0.8),
|
||||
AppColors.primaryOrange,
|
||||
LightColors.background,
|
||||
],
|
||||
dashboardGradientStops: [0.0, 0.2, 0.6, 1.0],
|
||||
heroProgressStart: Colors.white,
|
||||
heroProgressEnd: Color(0xFFF8F9FA),
|
||||
actionCardGradientStart: AppColors.primaryTeal,
|
||||
actionCardGradientEnd: AppColors.gradientEnd,
|
||||
authBackgroundGradient: [
|
||||
const Color(0xFFD4E8E8),
|
||||
const Color(0xFFE8D4C0),
|
||||
const Color(0xFFD8E0E8),
|
||||
],
|
||||
dashboardHeaderTextColor: Colors.white,
|
||||
);
|
||||
|
||||
static final AppThemeExtras dark = AppThemeExtras(
|
||||
dashboardBackgroundGradient: [
|
||||
DarkColors.surfaceVariant,
|
||||
DarkColors.surface,
|
||||
DarkColors.background,
|
||||
DarkColors.background,
|
||||
],
|
||||
dashboardGradientStops: [0.0, 0.25, 0.55, 1.0],
|
||||
heroProgressStart: Colors.white.withValues(alpha: 0.9),
|
||||
heroProgressEnd: Colors.white.withValues(alpha: 0.55),
|
||||
actionCardGradientStart: DarkBrandColors.gradientStart,
|
||||
actionCardGradientEnd: DarkBrandColors.gradientEnd,
|
||||
authBackgroundGradient: [
|
||||
DarkColors.surfaceVariant,
|
||||
DarkColors.surface,
|
||||
DarkColors.background,
|
||||
],
|
||||
dashboardHeaderTextColor: DarkColors.textPrimary,
|
||||
);
|
||||
|
||||
static AppThemeExtras of(BuildContext context) {
|
||||
return Theme.of(context).extension<AppThemeExtras>() ?? light;
|
||||
}
|
||||
|
||||
@override
|
||||
AppThemeExtras copyWith({
|
||||
List<Color>? dashboardBackgroundGradient,
|
||||
List<double>? dashboardGradientStops,
|
||||
Color? heroProgressStart,
|
||||
Color? heroProgressEnd,
|
||||
Color? actionCardGradientStart,
|
||||
Color? actionCardGradientEnd,
|
||||
List<Color>? authBackgroundGradient,
|
||||
Color? dashboardHeaderTextColor,
|
||||
}) {
|
||||
return AppThemeExtras(
|
||||
dashboardBackgroundGradient:
|
||||
dashboardBackgroundGradient ?? this.dashboardBackgroundGradient,
|
||||
dashboardGradientStops:
|
||||
dashboardGradientStops ?? this.dashboardGradientStops,
|
||||
heroProgressStart: heroProgressStart ?? this.heroProgressStart,
|
||||
heroProgressEnd: heroProgressEnd ?? this.heroProgressEnd,
|
||||
actionCardGradientStart:
|
||||
actionCardGradientStart ?? this.actionCardGradientStart,
|
||||
actionCardGradientEnd:
|
||||
actionCardGradientEnd ?? this.actionCardGradientEnd,
|
||||
authBackgroundGradient:
|
||||
authBackgroundGradient ?? this.authBackgroundGradient,
|
||||
dashboardHeaderTextColor:
|
||||
dashboardHeaderTextColor ?? this.dashboardHeaderTextColor,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
AppThemeExtras lerp(ThemeExtension<AppThemeExtras>? other, double t) {
|
||||
if (other is! AppThemeExtras) return this;
|
||||
return t < 0.5 ? this : other;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user