theme_config.dart 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter/services.dart';
  4. import 'package:get/get.dart';
  5. import '../../constants/color_constants.dart';
  6. class ThemeConfig {
  7. static ThemeData createTheme({
  8. required Brightness brightness,
  9. required Color background,
  10. required Color primaryText,
  11. Color? secondaryText,
  12. required Color accentColor,
  13. Color? divider,
  14. Color? buttonBackground,
  15. required Color buttonText,
  16. Color? cardBackground,
  17. Color? disabled,
  18. required Color error,
  19. }) {
  20. final baseTextTheme = brightness == Brightness.dark ? Typography.blackMountainView : Typography.whiteMountainView;
  21. return ThemeData(
  22. primaryColor: accentColor,
  23. brightness: brightness,
  24. canvasColor: background,
  25. cardColor: background,
  26. dividerColor: divider,
  27. scaffoldBackgroundColor: background,
  28. unselectedWidgetColor: hexToColor('#DADCDD'),
  29. dividerTheme: DividerThemeData(
  30. color: divider,
  31. space: 1,
  32. thickness: 1,
  33. ),
  34. cardTheme: CardTheme(
  35. color: cardBackground,
  36. margin: EdgeInsets.zero,
  37. clipBehavior: Clip.antiAliasWithSaveLayer,
  38. ),
  39. textSelectionTheme: TextSelectionThemeData(
  40. selectionColor: accentColor,
  41. selectionHandleColor: accentColor,
  42. cursorColor: accentColor,
  43. ),
  44. appBarTheme: AppBarTheme(
  45. color: cardBackground,
  46. titleTextStyle: TextStyle(
  47. color: secondaryText,
  48. fontSize: 18,
  49. ),
  50. iconTheme: IconThemeData(
  51. color: secondaryText,
  52. ),
  53. ),
  54. iconTheme: IconThemeData(
  55. color: secondaryText,
  56. size: 16.0,
  57. ),
  58. buttonTheme: ButtonThemeData(
  59. textTheme: ButtonTextTheme.primary,
  60. colorScheme: ColorScheme(
  61. brightness: brightness,
  62. primary: accentColor,
  63. secondary: accentColor,
  64. surface: background,
  65. background: background,
  66. error: error,
  67. onPrimary: buttonText,
  68. onSecondary: buttonText,
  69. onSurface: buttonText,
  70. onBackground: buttonText,
  71. onError: buttonText,
  72. ),
  73. padding: const EdgeInsets.all(16.0),
  74. ),
  75. cupertinoOverrideTheme: CupertinoThemeData(
  76. brightness: brightness,
  77. primaryColor: accentColor,
  78. ),
  79. inputDecorationTheme: InputDecorationTheme(
  80. errorStyle: TextStyle(color: error),
  81. labelStyle: TextStyle(
  82. fontFamily: 'Rubik',
  83. fontWeight: FontWeight.w600,
  84. fontSize: 16.0,
  85. color: primaryText.withOpacity(0.5),
  86. ),
  87. hintStyle: TextStyle(
  88. color: secondaryText,
  89. fontSize: 13.0,
  90. fontWeight: FontWeight.w300,
  91. ),
  92. ),
  93. );
  94. }
  95. static ThemeData get lightTheme => createTheme(
  96. brightness: Brightness.light,
  97. background: ColorConstants.lightScaffoldBackgroundColor,
  98. cardBackground: ColorConstants.secondaryAppColor,
  99. primaryText: Colors.black,
  100. secondaryText: Colors.black,
  101. accentColor: ColorConstants.secondaryAppColor,
  102. divider: ColorConstants.secondaryAppColor,
  103. buttonBackground: Colors.black38,
  104. buttonText: ColorConstants.secondaryAppColor,
  105. disabled: ColorConstants.secondaryAppColor,
  106. error: Colors.red,
  107. );
  108. static ThemeData get darkTheme => createTheme(
  109. brightness: Brightness.dark,
  110. background: ColorConstants.darkScaffoldBackgroundColor,
  111. cardBackground: ColorConstants.secondaryDarkAppColor,
  112. primaryText: Colors.white,
  113. secondaryText: Colors.white,
  114. accentColor: ColorConstants.secondaryDarkAppColor,
  115. divider: Colors.black45,
  116. buttonBackground: Colors.white,
  117. buttonText: ColorConstants.secondaryDarkAppColor,
  118. disabled: ColorConstants.secondaryDarkAppColor,
  119. error: Colors.red,
  120. );
  121. //亮色模式模式下的状态栏与导航栏设置 (默认黑色状态栏文本,白色导航栏)
  122. static SystemUiOverlayStyle get systemUiOverlayStyleLightThemeBlack {
  123. return SystemUiOverlayStyle.light.copyWith(
  124. statusBarColor: Colors.transparent,
  125. //顶部导航栏的状态栏背景颜色
  126. statusBarBrightness: Brightness.light,
  127. //顶部状态栏颜色模式
  128. statusBarIconBrightness: Brightness.dark,
  129. //顶部状态栏Icon与文本颜色模式
  130. systemNavigationBarDividerColor: Colors.transparent,
  131. //底部导航栏分割线颜色
  132. systemNavigationBarColor: Colors.white,
  133. //底部导航栏背景颜色
  134. systemNavigationBarIconBrightness: Brightness.dark, //底部导航栏三大金刚键的颜色模式
  135. );
  136. }
  137. //亮色模式模式下的状态栏与导航栏设置 (设置白色状态栏文本,白色导航栏)
  138. static SystemUiOverlayStyle get systemUiOverlayStyleLightThemeWhite {
  139. return SystemUiOverlayStyle.light.copyWith(
  140. statusBarColor: Colors.transparent,
  141. statusBarBrightness: Brightness.dark,
  142. statusBarIconBrightness: Brightness.light,
  143. systemNavigationBarDividerColor: Colors.transparent,
  144. systemNavigationBarColor: Colors.white,
  145. systemNavigationBarIconBrightness: Brightness.dark,
  146. );
  147. }
  148. //黑暗模式下,统一使用白色状态栏文本,黑色导航栏
  149. static SystemUiOverlayStyle get systemUiOverlayStyleDarkTheme {
  150. return SystemUiOverlayStyle.dark.copyWith(
  151. statusBarColor: Colors.transparent,
  152. statusBarBrightness: Brightness.dark,
  153. statusBarIconBrightness: Brightness.light,
  154. );
  155. }
  156. // ===================================== 切换样式 ↓ =====================================
  157. //强制更新整个App的样式
  158. static void _updateTheme(bool isDark) {
  159. Future.delayed(const Duration(milliseconds: 500), () {
  160. Get.forceAppUpdate();
  161. if (isDark) {
  162. if (GetPlatform.isAndroid) {
  163. //指定全局页面的状态栏,导航栏等设置
  164. SystemChrome.setSystemUIOverlayStyle(ThemeConfig.systemUiOverlayStyleDarkTheme);
  165. }
  166. } else {
  167. if (GetPlatform.isAndroid) {
  168. //指定全局页面的状态栏,导航栏等设置
  169. SystemChrome.setSystemUIOverlayStyle(ThemeConfig.systemUiOverlayStyleLightThemeBlack);
  170. }
  171. }
  172. });
  173. }
  174. static void changeThemeLight() {
  175. //如果是深色模式才切换亮色模式
  176. Get.changeThemeMode(ThemeMode.light);
  177. Get.changeTheme(ThemeConfig.lightTheme);
  178. _updateTheme(false);
  179. }
  180. static void changeThemeDark() {
  181. //如果是亮色模式才切换深色模式
  182. Get.changeThemeMode(ThemeMode.dark);
  183. Get.changeTheme(ThemeConfig.darkTheme);
  184. _updateTheme(true);
  185. }
  186. }