theme.dart 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. import 'package:flutter/material.dart';
  2. import 'package:google_fonts/google_fonts.dart';
  3. class AppTheme {
  4. static ThemeData get light {
  5. return _buildTheme(_lightColorScheme, Brightness.light);
  6. }
  7. static ThemeData get dark {
  8. return _buildTheme(_darkColorScheme, Brightness.dark);
  9. }
  10. static const ColorScheme _lightColorScheme = ColorScheme(
  11. brightness: Brightness.light,
  12. primary: Color(0xFF0058be), //Color(0xFF000000),
  13. onPrimary: Color(0xFFFFFFFF),
  14. primaryContainer: Color(0xFF131B2E),
  15. onPrimaryContainer: Color(0xFF7C839B),
  16. secondary: Color(0xFF0058BE),
  17. onSecondary: Color(0xFFFFFFFF),
  18. secondaryContainer: Color(0xFF2170E4),
  19. onSecondaryContainer: Color(0xFFFEFCFF),
  20. tertiary: Color(0xFF000000),
  21. onTertiary: Color(0xFFFFFFFF),
  22. tertiaryContainer: Color(0xFF191C1E),
  23. onTertiaryContainer: Color(0xFF818486),
  24. error: Color(0xFFBA1A1A),
  25. onError: Color(0xFFFFFFFF),
  26. errorContainer: Color(0xFFFFDAD6),
  27. onErrorContainer: Color(0xFF93000A),
  28. surface: Color(0xFFF8F9FF),
  29. onSurface: Color(0xFF0B1C30),
  30. surfaceContainerHighest: Color(0xFFD3E4FE),
  31. onSurfaceVariant: Color(0xFF45464D),
  32. outline: Color(0xFF76777D),
  33. outlineVariant: Color(0xFFC6C6CD),
  34. inverseSurface: Color(0xFF213145),
  35. //inverseOnSurface: Color(0xFFEAF1FF),
  36. inversePrimary: Color(0xFFBEC6E0),
  37. surfaceTint: Color(0xFF565E74),
  38. );
  39. static const ColorScheme _darkColorScheme = ColorScheme(
  40. brightness: Brightness.dark,
  41. primary: Color(0xFFBEC6E0),
  42. onPrimary: Color(0xFF131B2E),
  43. primaryContainer: Color(0xFF3F465C),
  44. onPrimaryContainer: Color(0xFFDAE2FD),
  45. secondary: Color(0xFFADC6FF),
  46. onSecondary: Color(0xFF001A42),
  47. secondaryContainer: Color(0xFF004395),
  48. onSecondaryContainer: Color(0xFFD8E2FF),
  49. tertiary: Color(0xFFC4C7C9),
  50. onTertiary: Color(0xFF191C1E),
  51. tertiaryContainer: Color(0xFF444749),
  52. onTertiaryContainer: Color(0xFFE0E3E5),
  53. error: Color(0xFFFFB4AB),
  54. onError: Color(0xFF690005),
  55. errorContainer: Color(0xFF93000A),
  56. onErrorContainer: Color(0xFFFFDAD6),
  57. surface: Color(0xFF111318),
  58. onSurface: Color(0xFFEAF1FF),
  59. surfaceContainerHighest: Color(0xFF2D3138),
  60. onSurfaceVariant: Color(0xFFC6C6CD),
  61. outline: Color(0xFF8E9099),
  62. outlineVariant: Color(0xFF45464D),
  63. inverseSurface: Color(0xFFEAF1FF),
  64. //inverseOnSurface: Color(0xFF213145),
  65. inversePrimary: Color(0xFF000000),
  66. surfaceTint: Color(0xFF565E74),
  67. );
  68. static ThemeData _buildTheme(ColorScheme colorScheme, Brightness brightness) {
  69. final textTheme = GoogleFonts.interTextTheme(
  70. brightness == Brightness.dark
  71. ? ThemeData.dark().textTheme
  72. : ThemeData.light().textTheme,
  73. );
  74. return ThemeData(
  75. useMaterial3: true,
  76. colorScheme: colorScheme,
  77. textTheme: textTheme.copyWith(
  78. displayLarge: textTheme.displayLarge?.copyWith(
  79. fontSize: 48,
  80. height: 56 / 48,
  81. letterSpacing: -0.02,
  82. fontWeight: FontWeight.w700,
  83. ),
  84. headlineLarge: textTheme.headlineLarge?.copyWith(
  85. fontSize: 32,
  86. height: 40 / 32,
  87. letterSpacing: -0.02,
  88. fontWeight: FontWeight.w700,
  89. ),
  90. headlineMedium: textTheme.headlineMedium?.copyWith(
  91. fontSize: 24,
  92. height: 32 / 24,
  93. fontWeight: FontWeight.w600,
  94. ),
  95. titleLarge: textTheme.titleLarge?.copyWith(
  96. fontSize: 20,
  97. height: 28 / 20,
  98. fontWeight: FontWeight.w600,
  99. ),
  100. bodyLarge: textTheme.bodyLarge?.copyWith(
  101. fontSize: 16,
  102. height: 24 / 16,
  103. fontWeight: FontWeight.w400,
  104. ),
  105. bodyMedium: textTheme.bodyMedium?.copyWith(
  106. fontSize: 14,
  107. height: 20 / 14,
  108. fontWeight: FontWeight.w400,
  109. ),
  110. labelMedium: textTheme.labelMedium?.copyWith(
  111. fontSize: 12,
  112. height: 16 / 12,
  113. fontWeight: FontWeight.w600,
  114. ),
  115. ),
  116. appBarTheme: AppBarTheme(
  117. centerTitle: false,
  118. elevation: 0,
  119. scrolledUnderElevation: 1,
  120. backgroundColor: colorScheme.surface,
  121. foregroundColor: colorScheme.onSurface,
  122. ),
  123. cardTheme: CardThemeData(
  124. elevation: 0,
  125. shape: RoundedRectangleBorder(
  126. borderRadius: BorderRadius.circular(12),
  127. side: BorderSide(color: colorScheme.outlineVariant, width: 0.5),
  128. ),
  129. ),
  130. inputDecorationTheme: InputDecorationTheme(
  131. filled: true,
  132. fillColor: colorScheme.surface,
  133. border: OutlineInputBorder(
  134. borderRadius: BorderRadius.circular(8),
  135. borderSide: BorderSide(color: colorScheme.outlineVariant),
  136. ),
  137. enabledBorder: OutlineInputBorder(
  138. borderRadius: BorderRadius.circular(8),
  139. borderSide: BorderSide(color: colorScheme.outlineVariant),
  140. ),
  141. focusedBorder: OutlineInputBorder(
  142. borderRadius: BorderRadius.circular(8),
  143. borderSide: BorderSide(color: colorScheme.secondary, width: 1),
  144. ),
  145. errorBorder: OutlineInputBorder(
  146. borderRadius: BorderRadius.circular(8),
  147. borderSide: BorderSide(color: colorScheme.error),
  148. ),
  149. contentPadding: const EdgeInsets.symmetric(
  150. horizontal: 16,
  151. vertical: 14,
  152. ),
  153. prefixIconColor: colorScheme.onSurfaceVariant,
  154. labelStyle: TextStyle(color: colorScheme.onSurfaceVariant),
  155. ),
  156. filledButtonTheme: FilledButtonThemeData(
  157. style: FilledButton.styleFrom(
  158. backgroundColor: colorScheme.primary,
  159. foregroundColor: colorScheme.onPrimary,
  160. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  161. padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
  162. textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
  163. ),
  164. ),
  165. outlinedButtonTheme: OutlinedButtonThemeData(
  166. style: OutlinedButton.styleFrom(
  167. foregroundColor: colorScheme.secondary,
  168. side: BorderSide(color: colorScheme.secondary.withValues(alpha: 0.2)),
  169. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  170. padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
  171. ),
  172. ),
  173. floatingActionButtonTheme: FloatingActionButtonThemeData(
  174. elevation: 2,
  175. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  176. ),
  177. navigationBarTheme: NavigationBarThemeData(
  178. elevation: 1,
  179. indicatorShape: RoundedRectangleBorder(
  180. borderRadius: BorderRadius.circular(12),
  181. ),
  182. ),
  183. navigationRailTheme: NavigationRailThemeData(
  184. elevation: 1,
  185. indicatorShape: RoundedRectangleBorder(
  186. borderRadius: BorderRadius.circular(12),
  187. ),
  188. ),
  189. dividerTheme: DividerThemeData(
  190. color: colorScheme.outlineVariant,
  191. thickness: 1,
  192. ),
  193. checkboxTheme: CheckboxThemeData(
  194. fillColor: WidgetStateProperty.resolveWith((states) {
  195. if (states.contains(WidgetState.selected)) {
  196. return colorScheme.secondary;
  197. }
  198. return Colors.transparent;
  199. }),
  200. checkColor: WidgetStateProperty.all(Colors.white),
  201. shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
  202. side: BorderSide(color: colorScheme.outlineVariant),
  203. ),
  204. );
  205. }
  206. }