runable
This commit is contained in:
Phuoc Nguyen
125
lib/core/theme/app_theme.dart
Normal file
125
lib/core/theme/app_theme.dart
Normal file
@@ -0,0 +1,125 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'colors.dart';
|
||||
|
||||
/// Material 3 theme configuration for the app
|
||||
class AppTheme {
|
||||
AppTheme._();
|
||||
|
||||
/// Light theme
|
||||
static ThemeData lightTheme() {
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.light,
|
||||
colorScheme: ColorScheme.light(
|
||||
primary: AppColors.primaryLight,
|
||||
secondary: AppColors.secondaryLight,
|
||||
tertiary: AppColors.tertiaryLight,
|
||||
error: AppColors.errorLight,
|
||||
surface: AppColors.surfaceLight,
|
||||
onPrimary: AppColors.white,
|
||||
onSecondary: AppColors.white,
|
||||
onSurface: AppColors.black,
|
||||
onError: AppColors.white,
|
||||
primaryContainer: AppColors.primaryContainer,
|
||||
secondaryContainer: AppColors.secondaryContainer,
|
||||
),
|
||||
scaffoldBackgroundColor: AppColors.backgroundLight,
|
||||
appBarTheme: const AppBarTheme(
|
||||
centerTitle: true,
|
||||
elevation: 0,
|
||||
backgroundColor: AppColors.primaryLight,
|
||||
foregroundColor: AppColors.white,
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: AppColors.grey100,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: AppColors.primaryLight, width: 2),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Dark theme
|
||||
static ThemeData darkTheme() {
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
colorScheme: ColorScheme.dark(
|
||||
primary: AppColors.primaryDark,
|
||||
secondary: AppColors.secondaryDark,
|
||||
tertiary: AppColors.tertiaryDark,
|
||||
error: AppColors.errorDark,
|
||||
surface: AppColors.surfaceDark,
|
||||
onPrimary: AppColors.black,
|
||||
onSecondary: AppColors.black,
|
||||
onSurface: AppColors.white,
|
||||
onError: AppColors.black,
|
||||
primaryContainer: AppColors.primaryContainer,
|
||||
secondaryContainer: AppColors.secondaryContainer,
|
||||
),
|
||||
scaffoldBackgroundColor: AppColors.backgroundDark,
|
||||
appBarTheme: const AppBarTheme(
|
||||
centerTitle: true,
|
||||
elevation: 0,
|
||||
backgroundColor: AppColors.backgroundDark,
|
||||
foregroundColor: AppColors.white,
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: AppColors.grey800,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: AppColors.primaryDark, width: 2),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
69
lib/core/theme/colors.dart
Normal file
69
lib/core/theme/colors.dart
Normal file
@@ -0,0 +1,69 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Application color scheme using Material 3 design
|
||||
class AppColors {
|
||||
AppColors._();
|
||||
|
||||
// Primary Colors
|
||||
static const Color primaryLight = Color(0xFF6750A4);
|
||||
static const Color primaryDark = Color(0xFFD0BCFF);
|
||||
static const Color primaryContainer = Color(0xFFEADDFF);
|
||||
|
||||
// Secondary Colors
|
||||
static const Color secondaryLight = Color(0xFF625B71);
|
||||
static const Color secondaryDark = Color(0xFFCCC2DC);
|
||||
static const Color secondaryContainer = Color(0xFFE8DEF8);
|
||||
|
||||
// Tertiary Colors
|
||||
static const Color tertiaryLight = Color(0xFF7D5260);
|
||||
static const Color tertiaryDark = Color(0xFFEFB8C8);
|
||||
|
||||
// Error Colors
|
||||
static const Color errorLight = Color(0xFFB3261E);
|
||||
static const Color errorDark = Color(0xFFF2B8B5);
|
||||
|
||||
// Background Colors
|
||||
static const Color backgroundLight = Color(0xFFFFFBFE);
|
||||
static const Color backgroundDark = Color(0xFF1C1B1F);
|
||||
|
||||
// Surface Colors
|
||||
static const Color surfaceLight = Color(0xFFFFFBFE);
|
||||
static const Color surfaceDark = Color(0xFF1C1B1F);
|
||||
|
||||
// Semantic Colors
|
||||
static const Color success = Color(0xFF4CAF50);
|
||||
static const Color warning = Color(0xFFFFA726);
|
||||
static const Color info = Color(0xFF2196F3);
|
||||
|
||||
// Neutral Colors
|
||||
static const Color black = Color(0xFF000000);
|
||||
static const Color white = Color(0xFFFFFFFF);
|
||||
static const Color grey50 = Color(0xFFFAFAFA);
|
||||
static const Color grey100 = Color(0xFFF5F5F5);
|
||||
static const Color grey200 = Color(0xFFEEEEEE);
|
||||
static const Color grey300 = Color(0xFFE0E0E0);
|
||||
static const Color grey400 = Color(0xFFBDBDBD);
|
||||
static const Color grey500 = Color(0xFF9E9E9E);
|
||||
static const Color grey600 = Color(0xFF757575);
|
||||
static const Color grey700 = Color(0xFF616161);
|
||||
static const Color grey800 = Color(0xFF424242);
|
||||
static const Color grey900 = Color(0xFF212121);
|
||||
|
||||
// Category Colors (for category badges)
|
||||
static const List<Color> categoryColors = [
|
||||
Color(0xFFE91E63),
|
||||
Color(0xFF9C27B0),
|
||||
Color(0xFF673AB7),
|
||||
Color(0xFF3F51B5),
|
||||
Color(0xFF2196F3),
|
||||
Color(0xFF00BCD4),
|
||||
Color(0xFF009688),
|
||||
Color(0xFF4CAF50),
|
||||
Color(0xFF8BC34A),
|
||||
Color(0xFFCDDC39),
|
||||
Color(0xFFFFEB3B),
|
||||
Color(0xFFFFC107),
|
||||
Color(0xFFFF9800),
|
||||
Color(0xFFFF5722),
|
||||
];
|
||||
}
|
||||
95
lib/core/theme/typography.dart
Normal file
95
lib/core/theme/typography.dart
Normal file
@@ -0,0 +1,95 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Application typography using Material 3 type scale
|
||||
class AppTypography {
|
||||
AppTypography._();
|
||||
|
||||
// Display Styles
|
||||
static const TextStyle displayLarge = TextStyle(
|
||||
fontSize: 57,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: -0.25,
|
||||
);
|
||||
|
||||
static const TextStyle displayMedium = TextStyle(
|
||||
fontSize: 45,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
static const TextStyle displaySmall = TextStyle(
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
// Headline Styles
|
||||
static const TextStyle headlineLarge = TextStyle(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
static const TextStyle headlineMedium = TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
static const TextStyle headlineSmall = TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
// Title Styles
|
||||
static const TextStyle titleLarge = TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w500,
|
||||
);
|
||||
|
||||
static const TextStyle titleMedium = TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.15,
|
||||
);
|
||||
|
||||
static const TextStyle titleSmall = TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.1,
|
||||
);
|
||||
|
||||
// Body Styles
|
||||
static const TextStyle bodyLarge = TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.5,
|
||||
);
|
||||
|
||||
static const TextStyle bodyMedium = TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.25,
|
||||
);
|
||||
|
||||
static const TextStyle bodySmall = TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.4,
|
||||
);
|
||||
|
||||
// Label Styles
|
||||
static const TextStyle labelLarge = TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.1,
|
||||
);
|
||||
|
||||
static const TextStyle labelMedium = TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.5,
|
||||
);
|
||||
|
||||
static const TextStyle labelSmall = TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.5,
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user