我们通常在启动Flutter项目的时候会全局配置MaterialApp.theme - 也就是ThemeData,
我们大多数在开发中会配置ThemeData 4到5项，有些项目会用到8到10项。你的项目用到了多少如果感兴趣大家可以留言交流一下。
现在先让我们看一下ThemeData源码可以配置哪些属性。
需要注意的是：毕竟是全局配置，尽量保持通用，不要影响其他widget也是要考虑的地方。
factory ThemeData({
Brightness? brightness,
VisualDensity? visualDensity,
MaterialColor? primarySwatch,
Color? primaryColor,
Brightness? primaryColorBrightness,
Color? primaryColorLight,
Color? primaryColorDark,
@Deprecated(
'Use colorScheme.secondary instead. '
'For more information, consult the migration guide at '
'https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties#migration-guide. '
'This feature was deprecated after v2.3.0-0.1.pre.',
)
Color? accentColor,
@Deprecated(
'No longer used by the framework, please remove any reference to it. '
'For more information, consult the migration guide at '
'https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties#migration-guide. '
'This feature was deprecated after v2.3.0-0.1.pre.',
)
Brightness? accentColorBrightness,
Color? canvasColor,
Color? shadowColor,
Color? scaffoldBackgroundColor,
Color? bottomAppBarColor,
Color? cardColor,
Color? dividerColor,
Color? focusColor,
Color? hoverColor,
Color? highlightColor,
Color? splashColor,
InteractiveInkFeatureFactory? splashFactory,
Color? selectedRowColor,
Color? unselectedWidgetColor,
Color? disabledColor,
@Deprecated(
'No longer used by the framework, please remove any reference to it. '
'This feature was deprecated after v2.3.0-0.2.pre.',
)
Color? buttonColor,
ButtonThemeData? buttonTheme,
ToggleButtonsThemeData? toggleButtonsTheme,
Color? secondaryHeaderColor,
@Deprecated(
'Use TextSelectionThemeData.selectionColor instead. '
'This feature was deprecated after v1.26.0-18.0.pre.',
)
Color? textSelectionColor,
@Deprecated(
'Use TextSelectionThemeData.cursorColor instead. '
'This feature was deprecated after v1.26.0-18.0.pre.',
)
Color? cursorColor,
@Deprecated(
'Use TextSelectionThemeData.selectionHandleColor instead. '
'This feature was deprecated after v1.26.0-18.0.pre.',
)
Color? textSelectionHandleColor,
Color? backgroundColor,
Color? dialogBackgroundColor,
Color? indicatorColor,
Color? hintColor,
Color? errorColor,
Color? toggleableActiveColor,
String? fontFamily,
TextTheme? textTheme,
TextTheme? primaryTextTheme,
@Deprecated(
'No longer used by the framework, please remove any reference to it. '
'For more information, consult the migration guide at '
'https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties#migration-guide. '
'This feature was deprecated after v2.3.0-0.1.pre.',
)
TextTheme? accentTextTheme,
InputDecorationTheme? inputDecorationTheme,
IconThemeData? iconTheme,
IconThemeData? primaryIconTheme,
@Deprecated(
'No longer used by the framework, please remove any reference to it. '
'For more information, consult the migration guide at '
'https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties#migration-guide. '
'This feature was deprecated after v2.3.0-0.1.pre.',
)
IconThemeData? accentIconTheme,
SliderThemeData? sliderTheme,
TabBarTheme? tabBarTheme,
TooltipThemeData? tooltipTheme,
CardTheme? cardTheme,
ChipThemeData? chipTheme,
TargetPlatform? platform,
MaterialTapTargetSize? materialTapTargetSize,
bool? applyElevationOverlayColor,
PageTransitionsTheme? pageTransitionsTheme,
AppBarTheme? appBarTheme,
ScrollbarThemeData? scrollbarTheme,
BottomAppBarTheme? bottomAppBarTheme,
ColorScheme? colorScheme,
DialogTheme? dialogTheme,
FloatingActionButtonThemeData? floatingActionButtonTheme,
NavigationRailThemeData? navigationRailTheme,
Typography? typography,
NoDefaultCupertinoThemeData? cupertinoOverrideTheme,
SnackBarThemeData? snackBarTheme,
BottomSheetThemeData? bottomSheetTheme,
PopupMenuThemeData? popupMenuTheme,
MaterialBannerThemeData? bannerTheme,
DividerThemeData? dividerTheme,
ButtonBarThemeData? buttonBarTheme,
BottomNavigationBarThemeData? bottomNavigationBarTheme,
TimePickerThemeData? timePickerTheme,
TextButtonThemeData? textButtonTheme,
ElevatedButtonThemeData? elevatedButtonTheme,
OutlinedButtonThemeData? outlinedButtonTheme,
TextSelectionThemeData? textSelectionTheme,
DataTableThemeData? dataTableTheme,
CheckboxThemeData? checkboxTheme,
RadioThemeData? radioTheme,
SwitchThemeData? switchTheme,
ProgressIndicatorThemeData? progressIndicatorTheme,
@Deprecated(
'This "fix" is now enabled by default. '
'This feature was deprecated after v2.5.0-1.0.pre.',
)
bool? fixTextFieldOutlineLabel,
@Deprecated(
'No longer used by the framework, please remove any reference to it. '
'This feature was deprecated after v1.23.0-4.0.pre.',
)
bool? useTextSelectionTheme,
})
现在让我们详细看看这些
1. Brightness brightness ( The desired theme):
通常项目中不需要配置，
有两个值可选Brightness.dark和Brightness.light 一个深色 一个浅色 当值为dart深色的时候text是白色，当值为light的时候text为黑色。
因为这个值是根据 colorScheme自动识别深还是浅
下面是部分源码：
colorScheme ??= ColorScheme.fromSwatch(
primarySwatch: primarySwatch,
primaryColorDark: primaryColorDark,
accentColor: accentColor,
cardColor: cardColor,
backgroundColor: backgroundColor,
errorColor: errorColor,
brightness: _brightness,
);
assert(colorScheme?.brightness == null || brightness == null || colorScheme!.brightness == brightness);
final Brightness _brightness = brightness ?? colorScheme?.brightness ?? Brightness.light;
final bool isDark = _brightness == Brightness.dark;
2. VisualDensity visualDensity:
通常不需要配置：系统默认 VisualDensity.adaptivePlatformDensity
它定义了用户界面组件的视觉密度。在 UI 的上下文中，密度是 UI 中组件的垂直和水平“紧凑性”。它是无单位的，因为它对于不同的 UI 组件意味着不同。水平和垂直密度的视觉密度默认为零，这对应于材料设计规范中组件的默认视觉密度。它不会影响文本大小、图标大小或填充值。例如，对于按钮，它会影响按钮子项周围的间距。对于列表，它会影响列表中条目基线之间的距离。对于芯片，它只影响垂直尺寸，不影响水平尺寸。
3. MaterialColor primarySwatch:
通常都需要配置 项目的主色调
看它的类型。MaterialColor。这就是为什么它会包含从 50 到 900 的色度。 PrimarySwatch 用于配置几个字段的默认值，
包括primaryColor、primaryColorBrightness、primaryColorLight、primaryColorDark、toggableActiveColor、accentColor、colorScheme、secondaryHeaderColor、textSelectionColor、backgroundColor 和 buttonColor 和 buttonColor
如果您想通过Color.颜色来配置MaterialColor.请参照我写的另一篇 如何通过Color自定义MaterialColor。
4. Color primaryColor:
看项目情况是否需要配置，如果不配置默认取primarySwatch的值
主要配置app里主要部分的北京颜色，例如toolbars, tab bars, appbar, 和其他的一些控件。
5. Brightness primaryColorBrightness:
一般情况用不到 具体情况具体场景在用
主要用于定义primaryColor上的text 和icon的颜色
以下待完善
6. Color primaryColorLight:
7. Color primaryColorDark:
8. Color canvasColor:
9. Color accentColor:
10. Brightness accentColorBrightness:
11. Color scaffoldBackgroundColor:
根据项目自行配置
全局修改页面Scaffold的背景颜色
12. Color bottomAppBarColor:
13. Color cardColor:
14. Color dividerColor:
15. Color focusColor:
16. Color hoverColor:
Color hightlightColor:
Color splashColor:
InteractiveInkFeatureFactory splashFactory:
Color selectedRowColor:
Color unselectedWidgetColor:
Color disabledColor:
ButtonThemeData buttonTheme:
ToggleButtonsThemeData toggleButtonsTheme:
Color buttonColor:
Color secondaryHeaderColor:
Color textSelectionHandleColor:
Color backgroundColor:
Color dialogBackgroundColor:
Color indicatorColor:
Color hintColor:
Color errorColor:
Color toggleableActiveColor:
TextTheme textTheme:
TextTheme primaryTextTheme:
TextTheme accentTextTheme:
InputDecorationTheme inputDecorationTheme:
IconThemeData iconTheme:
IconThemeData primaryIconTheme:
IconThemeData accentIconTheme:
SliderThemeData sliderTheme:
TabBarTheme tabBarTheme:
TooltipThemeData tooltipTheme:
CardTheme cardTheme:
ChipThemeData chipThemeData:
TargetPlatform platform:
MaterialTapTargetSize materialTapTargetSize:
bool applyElevationOverlayColor:
PageTransitionsTheme pageTransitionsTheme:
AppBarTheme appBarTheme:
BottomAppBarTheme botttomAppBarTheme:
ColorScheme colorScheme:
SnackBarThemeData snackBarTheme:
DialogTheme dialogTheme:
FloatingActionButtonThemeData floatingActionButtonTheme:
NavigationRailThemeData navigationTheme:
Typography typogrpahy:
CupertinoThemeData cupertinoOverrideTheme:
BottomSheetThemeData bottomSheetTheme:
PopupMenuThemeData popupMenuTheme:
MaterialBannerThemeData bannerTheme:
DividerThemeData dividerTheme:
ButtonBarThemeData buttonBarTheme:
String fontFamily:
