ThemeData的定義
// GENERAL CONFIGURATION
bool? applyElevationOverlayColor,
NoDefaultCupertinoThemeData? cupertinoOverrideTheme,
Iterable<ThemeExtension<dynamic>>? extensions,
InputDecorationTheme? inputDecorationTheme,
MaterialTapTargetSize? materialTapTargetSize,
PageTransitionsTheme? pageTransitionsTheme,
TargetPlatform? platform,
ScrollbarThemeData? scrollbarTheme,
InteractiveInkFeatureFactory? splashFactory,
VisualDensity? visualDensity,
bool? useMaterial3,
ColorScheme? colorScheme,
Color? colorSchemeSeed,
Brightness? brightness,
MaterialColor? primarySwatch,
Color? primaryColor,
Color? primaryColorLight,
Color? primaryColorDark,
Color? focusColor,
Color? hoverColor,
Color? shadowColor,
Color? canvasColor,
Color? scaffoldBackgroundColor,
Color? bottomAppBarColor,
Color? cardColor,
Color? dividerColor,
Color? highlightColor,
Color? splashColor,
Color? selectedRowColor,
Color? unselectedWidgetColor,
Color? disabledColor,
Color? secondaryHeaderColor,
Color? backgroundColor,
Color? dialogBackgroundColor,
Color? indicatorColor,
Color? hintColor,
Color? errorColor,
Color? toggleableActiveColor,
// TYPOGRAPHY & ICONOGRAPHY
String? fontFamily,
Typography? typography,
TextTheme? textTheme,
TextTheme? primaryTextTheme,
IconThemeData? iconTheme,
IconThemeData? primaryIconTheme,
// COMPONENT THEMES
AppBarTheme? appBarTheme,
MaterialBannerThemeData? bannerTheme,
BottomAppBarTheme? bottomAppBarTheme,
BottomNavigationBarThemeData? bottomNavigationBarTheme,
BottomSheetThemeData? bottomSheetTheme,
ButtonBarThemeData? buttonBarTheme,
ButtonThemeData? buttonTheme,
CardTheme? cardTheme,
CheckboxThemeData? checkboxTheme,
ChipThemeData? chipTheme,
DataTableThemeData? dataTableTheme,
DialogTheme? dialogTheme,
DividerThemeData? dividerTheme,
DrawerThemeData? drawerTheme,
ElevatedButtonThemeData? elevatedButtonTheme,
FloatingActionButtonThemeData? floatingActionButtonTheme,
ListTileThemeData? listTileTheme,
NavigationBarThemeData? navigationBarTheme,
NavigationRailThemeData? navigationRailTheme,
OutlinedButtonThemeData? outlinedButtonTheme,
PopupMenuThemeData? popupMenuTheme,
ProgressIndicatorThemeData? progressIndicatorTheme,
RadioThemeData? radioTheme,
SliderThemeData? sliderTheme,
SnackBarThemeData? snackBarTheme,
SwitchThemeData? switchTheme,
TabBarTheme? tabBarTheme,
TextButtonThemeData? textButtonTheme,
TextSelectionThemeData? textSelectionTheme,
TimePickerThemeData? timePickerTheme,
ToggleButtonsThemeData? toggleButtonsTheme,
TooltipThemeData? tooltipTheme,
ExpansionTileThemeData? expansionTileTheme,
// ...棄用的屬性這里就不介紹了
AndroidOverscrollIndicator? androidOverscrollIndicator,
})
屬性介紹
-
applyElevationOverlayColor默認(rèn)值是false 在brightness 為Brightness.dark是為有elevation 屬性的 Material surfaces，添加一個(gè)半透明的遮罩，
用來(lái)凸顯陰影效果， 效果如下，可以看出，當(dāng)為true的時(shí)候，背景會(huì)白一些。這個(gè)屬性只適用于Material 2的dark theme，在Material 3中是無(wú)效的。
applyElevationOverlayColor_false.png
applyElevationOverlayColor_true.png
2.cupertinoOverrideTheme用來(lái)設(shè)置iOS組件的樣式
//沒有為屬性設(shè)置默認(rèn)值
class NoDefaultCupertinoThemeData {
const NoDefaultCupertinoThemeData({
this.brightness,
//這個(gè)顏色一般用在按鈕和可點(diǎn)擊的文本和圖標(biāo)上，如果 [primaryColor] 未指定，將使用 [ThemeData] 的 colorScheme.primary。
this.primaryColor,
//如果未指定將使用 [ThemeData] 的colorScheme.onPrimary
this.primaryContrastingColor,
//iOS組件默認(rèn)的字體樣式
this.textTheme,
//iOS NavigationBar的顏色
this.barBackgroundColor,
//Scaffold 背景色
this.scaffoldBackgroundColor,
});
//...
}
//為屬性設(shè)置了默認(rèn)值
class CupertinoThemeData extends NoDefaultCupertinoThemeData with Diagnosticable {
const CupertinoThemeData({
Brightness? brightness,
Color? primaryColor,
Color? primaryContrastingColor,
CupertinoTextThemeData? textTheme,
Color? barBackgroundColor,
Color? scaffoldBackgroundColor,
}) : this.raw(
brightness,
primaryColor,
primaryContrastingColor,
textTheme,
barBackgroundColor,
scaffoldBackgroundColor,
);
}
//默認(rèn)值
const _CupertinoThemeDefaults _kDefaultTheme = _CupertinoThemeDefaults(
null,
CupertinoColors.systemBlue,
CupertinoColors.systemBackground,
CupertinoDynamicColor.withBrightness(
color: Color(0xF0F9F9F9),
darkColor: Color(0xF01D1D1D),
// Values extracted from navigation bar. For toolbar or tabbar the dark color is 0xF0161616.
),
CupertinoColors.systemBackground,
_CupertinoTextThemeDefaults(CupertinoColors.label, CupertinoColors.inactiveGray),
);
- extensions 用來(lái)添加自定義的主題顏色
abstract class ThemeExtension<T extends ThemeExtension<T>> {
/// Enable const constructor for subclasses.
const ThemeExtension();
/// The extension's type.
Object get type => T;
/// Creates a copy of this theme extension with the given fields
/// replaced by the non-null parameter values.
ThemeExtension<T> copyWith();
/// Linearly interpolate with another [ThemeExtension] object.
///
/// {@macro dart.ui.shadow.lerp}
ThemeExtension<T> lerp(ThemeExtension<T>? other, double t);
}
- inputDecorationTheme 用于設(shè)置TextField的樣式
class InputDecorationTheme with Diagnosticable {
/// Creates a value for [ThemeData.inputDecorationTheme] that
/// defines default values for [InputDecorator].
///
/// The values of [isDense], [isCollapsed], [filled], [floatingLabelAlignment],
/// and [border] must not be null.
const InputDecorationTheme({
this.labelStyle,
this.floatingLabelStyle,
this.helperStyle,
this.helperMaxLines,
this.hintStyle,
this.errorStyle,
this.errorMaxLines,
this.floatingLabelBehavior = FloatingLabelBehavior.auto,
this.floatingLabelAlignment = FloatingLabelAlignment.start,
this.isDense = false,
this.contentPadding,
this.isCollapsed = false,
this.iconColor,
this.prefixStyle,
this.prefixIconColor,
this.suffixStyle,
this.suffixIconColor,
this.counterStyle,
this.filled = false,
this.fillColor,
this.focusColor,
this.hoverColor,
this.errorBorder,
this.focusedBorder,
this.focusedErrorBorder,
this.disabledBorder,
this.enabledBorder,
this.border,
this.alignLabelWithHint = false,
this.constraints,
}) : assert(isDense != null),
assert(isCollapsed != null),
assert(floatingLabelAlignment != null),
assert(filled != null),
assert(alignLabelWithHint != null);
//....
}
- materialTapTargetSize 配置某些 Material 小部件的點(diǎn)擊目標(biāo)和布局大小。
/// 一些受影響的小部件包括：
///
/// * [FloatingActionButton], only the mini tap target size is increased.
/// * [MaterialButton]
/// * [OutlinedButton]
/// * [TextButton]
/// * [ElevatedButton]
/// * [FlatButton]
/// * [RaisedButton]
/// * The time picker widget ([showTimePicker])
/// * [SnackBar]
/// * [Chip]
/// * [RawChip]
/// * [InputChip]
/// * [ChoiceChip]
/// * [FilterChip]
/// * [ActionChip]
/// * [Radio]
/// * [Switch]
/// * [Checkbox]
enum MaterialTapTargetSize {
/// 將最小點(diǎn)擊目標(biāo)大小擴(kuò)展為 48px x 48px。
///
/// 這是 [ThemeData.materialTapTargetSize] 的默認(rèn)值和
/// 推薦大小以符合 Android 可訪問性掃描儀
/// 建議。
padded,
/// 將點(diǎn)擊目標(biāo)尺寸縮小到Material 規(guī)范提供的最小值。
shrinkWrap,
}
- pageTransitionsTheme 定義[MaterialPageRoute]使用的頁(yè)面過(guò)渡動(dòng)畫
/// 定義[MaterialPageRoute]使用的頁(yè)面過(guò)渡動(dòng)畫
/// 用于不同的 [TargetPlatform]。
///
/// [MaterialPageRoute.buildTransitions] 方法使用 `Theme.of(context).pageTransitionsTheme` 查找當(dāng)前當(dāng)前的 [PageTransitionsTheme] 并委托給 [buildTransitions]。如果未找到具有匹配平臺(tái)的構(gòu)建器，則使用 [FadeUpwardsPageTransitionsBuilder]。
///
/// 也可以看看：
///
/// * [ThemeData.pageTransitionsTheme]，定義默認(rèn)頁(yè)面
/// 整體主題的過(guò)渡。
/// * [FadeUpwardsPageTransitionsBuilder]，定義了一個(gè)頁(yè)面過(guò)渡
/// 與Android O提供的類似。
/// * [OpenUpwardsPageTransitionsBuilder]，定義了一個(gè)頁(yè)面過(guò)渡
/// 這與Android P提供的類似。
/// * [ZoomPageTransitionsBuilder]，定義了默認(rèn)的頁(yè)面過(guò)渡
/// 這和Android Q提供的類似。
/// * [CupertinoPageTransitionsBuilder]，定義一個(gè)水平頁(yè)面
/// 匹配原生 iOS 頁(yè)面轉(zhuǎn)換的轉(zhuǎn)換。
class PageTransitionsTheme with Diagnosticable {
/// 默認(rèn)情況下，構(gòu)建器列表是：[ZoomPageTransitionsBuilder]
用于 [TargetPlatform.android]，[CupertinoPageTransitionsBuilder] 用于 [TargetPlatform.iOS] 和 [TargetPlatform.macOS]。
const PageTransitionsTheme({ Map<TargetPlatform, PageTransitionsBuilder> builders = _defaultBuilders }) : _builders = builders;
static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
TargetPlatform.android: ZoomPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
};
//.....
}
7.platform material 小部件應(yīng)適應(yīng)目標(biāo)的平臺(tái)?？捎糜诖_定 [typography] 和 [materialTapTargetSize] 的默認(rèn)值。
TargetPlatform get defaultTargetPlatform => platform.defaultTargetPlatform;
/// The platform that user interaction should adapt to target.
///
/// The [defaultTargetPlatform] getter returns the current platform.
enum TargetPlatform {
/// Android: <https://www.android.com/>
android,
/// Fuchsia: <https://fuchsia.dev/fuchsia-src/concepts>
fuchsia,
/// iOS: <https://www.apple.com/ios/>
iOS,
/// Linux: <https://www.linux.org>
linux,
/// macOS: <https://www.apple.com/macos>
macOS,
/// Windows: <https://www.windows.com>
windows,
}
- scrollbarTheme 自定義[滾動(dòng)條]顏色、粗細(xì)和形狀的主題。
//定義后代 [Scrollbar] 小部件的默認(rèn)屬性值。
/// 后代小部件通過(guò) `ScrollbarTheme.of(context)` 獲取當(dāng)前的 [ScrollbarThemeData] 對(duì)象。 [ScrollbarThemeData] 的實(shí)例可以使用 [ScrollbarThemeData.copyWith] 進(jìn)行自定義。
///
/// 通常，[ScrollbarTheme] 的 [ScrollbarThemeData] 被指定為帶有 [ThemeData.scrollbarTheme] 的整體 [Theme] 的一部分。
///
/// 所有 [ScrollbarThemeData] 屬性默認(rèn)為 `null`。 當(dāng)為空時(shí)，
/// [滾動(dòng)條] 計(jì)算自己的默認(rèn)值，通?；谡w
/// 主題的 [ThemeData.colorScheme]。
///
class ScrollbarThemeData with Diagnosticable {
/// Creates a theme that can be used for [ThemeData.scrollbarTheme].
const ScrollbarThemeData({
this.thumbVisibility,
this.thickness,
this.trackVisibility,
this.radius,
this.thumbColor,
this.trackColor,
this.trackBorderColor,
this.crossAxisMargin,
this.mainAxisMargin,
this.minThumbLength,
this.interactive,
@Deprecated(
'Use thumbVisibility instead. '
'This feature was deprecated after v2.9.0-1.0.pre.',
)
this.isAlwaysShown,
@Deprecated(
'Use ScrollbarThemeData.trackVisibility to resolve based on the current state instead. '
'This feature was deprecated after v2.9.0-1.0.pre.',
)
this.showTrackOnHover,
}) : assert(
isAlwaysShown == null || thumbVisibility == null,
'Scrollbar thumb appearance should only be controlled with thumbVisibility, '
'isAlwaysShown is deprecated.'
);
- splashFactory 定義由 [InkWell] 和 [InkResponse]產(chǎn)生的水波紋的外觀
abstract class InteractiveInkFeatureFactory {
const InteractiveInkFeatureFactory();
@factory
InteractiveInkFeature create({
required MaterialInkController controller,
required RenderBox referenceBox,
required Offset position,
required Color color,
required TextDirection textDirection,
bool containedInkWell = false,
RectCallback? rectCallback,
BorderRadius? borderRadius,
ShapeBorder? customBorder,
double? radius,
VoidCallback? onRemoved,
});
}
- visualDensity 定義用戶界面組件的視覺密度。
/// 定義用戶界面組件的視覺密度。
///
/// 密度，在 UI 的上下文中，是垂直和水平的
/// UI 中組件的“緊湊性”。它是無(wú)單位的，因?yàn)樗鼘?duì)不同的 UI 組件意味著不同的東西。
///
/// 垂直和水平的視覺密度默認(rèn)為零
/// 密度，對(duì)應(yīng)Material Design規(guī)范中組件的默認(rèn)視覺密度。它不影響文本大小、圖標(biāo)大小或填充值。
/// 例如，對(duì)于按鈕，它會(huì)影響按鈕子元素周圍的間距。對(duì)于列表，它會(huì)影響列表中條目基線之間的距離。對(duì)于芯片，它只影響垂直尺寸，而不影響水平尺寸。
/// 以下是一些響應(yīng)密度變化的小部件示例：
///
/// * [Checkbox]
/// * [Chip]
/// * [ElevatedButton]
/// * [FlatButton]
/// * [IconButton]
/// * [InputDecorator] (which gives density support to [TextField], etc.)
/// * [ListTile]
/// * [MaterialButton]
/// * [OutlinedButton]
/// * [Radio]
/// * [RawMaterialButton]
/// * [TextButton]
class VisualDensity with Diagnosticable {
/// A const constructor for [VisualDensity].
///
/// All of the arguments must be non-null, and [horizontal] and [vertical]
/// must be in the interval between [minimumDensity] and [maximumDensity],
/// inclusive.
const VisualDensity({
this.horizontal = 0.0,
this.vertical = 0.0,
}) : assert(horizontal != null),
assert(vertical != null),
assert(vertical <= maximumDensity),
assert(vertical <= maximumDensity),
assert(vertical >= minimumDensity),
assert(horizontal <= maximumDensity),
assert(horizontal >= minimumDensity);
/// The minimum allowed density.
static const double minimumDensity = -4.0;
/// The maximum allowed density.
static const double maximumDensity = 4.0;
//......
}
- useMaterial3 用于選擇加入 Material 3 功能的臨時(shí)標(biāo)志。
/// 用于選擇加入 Material 3 功能的臨時(shí)標(biāo)志。
/// 如果為 true，則已遷移到 Material 3 的組件將使用 Material 3 的新顏色、排版和其他功能。
///如果為 false，它們將使用 Material 2 的外觀。如果在 [useMaterial3] 設(shè)置為 true 的情況下構(gòu)造 [ThemeData]，則某些屬性將獲得特殊的默認(rèn)值。
///但是，僅復(fù)制 [useMaterial3] 設(shè)置為 true 的 [ThemeData] 不會(huì)更改生成的 [ThemeData] 中的任何這些屬性。
///這些屬性是：
/// | Property | Material 3 default | Fallback default |
/// | :-------------- | :--------------------------- | :------------------------ |
/// | [typography] | [Typography.material2021] | [Typography.material2014] |
/// | [splashFactory] | [InkSparkle]* or [InkRipple] | [InkSplash] |
/// 在遷移到 Material 3 期間，打開它可能會(huì)在您的應(yīng)用中產(chǎn)生不一致的外觀。一些組件將在其他組件之前遷移，并且排版更改將分階段進(jìn)行。
/// [useMaterial3] 默認(rèn)為 false。在所有遷移的組件都登陸穩(wěn)定后，我們將默認(rèn)將其更改為 true。在該更改登陸穩(wěn)定版后，我們將棄用此標(biāo)志并刪除它的所有用途。那時(shí)一切都將使用 Material 3 的外觀和感覺。
/// 已經(jīng)遷移到 Material 3 的組件有：
/// * [AlertDialog]
/// * [AppBar]
/// * [Card]
/// * [Dialog]
/// * [ElevatedButton]
/// * [FloatingActionButton]
/// * [Material]
/// * [NavigationBar]
/// * [NavigationRail]
/// * [OutlinedButton]
/// * [StretchingOverscrollIndicator], replacing the
/// [GlowingOverscrollIndicator]
/// * [TextButton]
/// * [Material Design 3](https://m3.material.io/).
- colorScheme 一組十二種顏色，可用于配置大多數(shù)組件的顏色屬性。顏色屬性的作用
/// * Primary colors用于整個(gè) UI 的關(guān)鍵組件，例如 FAB、突出按鈕和活動(dòng)狀態(tài)。
/// * Secondary colors 用于UI中不太突出的組件，例如濾鏡芯片，同時(shí)擴(kuò)大了顏色表達(dá)的機(jī)會(huì)。
/// * Tertiary colors 用于對(duì)比強(qiáng)調(diào)色，可用于平衡原色和二次色或提高對(duì)元素的關(guān)注，例如輸入字段。第三色留給制造商自行決定使用，旨在支持
產(chǎn)品中更廣泛的色彩表達(dá)。
/// 該方案的其余顏色由用于背景和表面的中性顏色以及用于錯(cuò)誤、分隔線和陰影的特定顏色組成。
/// 許多顏色都有匹配的“on”顏色，用于在匹配顏色之上繪制內(nèi)容。例如，如果某物使用 [primary] 作為背景顏色，則 [onPrimary] 將用于在其上繪制文本和圖標(biāo)。出于這個(gè)原因，“打開”顏色應(yīng)與其匹配顏色具有至少 4.5:1 的對(duì)比度，以便可讀。
/// 如果未提供顏色，將使用與給定顏色最接近的備用顏色（例如 [primaryContainer] 將默認(rèn)為 [primary]）。 Material Design 3 將這些顏色用于許多組件的默認(rèn)設(shè)置，因此為了獲得最佳效果，應(yīng)用程序應(yīng)該
為所有參數(shù)提供顏色。確保這一點(diǎn)的一種簡(jiǎn)單方法是
使用 [ColorScheme.fromSeed] 生成全套顏色。
/// 在遷移到 Material Design 3 期間，如果應(yīng)用程序的 [ThemeData.useMaterial3] 為 false，則組件將僅使用以下顏色作為默認(rèn)顏色：
///
/// * [primary]
/// * [onPrimary]
/// * [secondary]
/// * [onSecondary]
/// * [error]
/// * [onError]
/// * [background]
/// * [onBackground]
/// * [surface]
/// * [onSurface]
//顏色屬性
const ColorScheme({
required this.brightness,
// 主要角色用于整個(gè) UI 中的關(guān)鍵組件，例如 FAB(FloatingActionButton)、突出按鈕、活動(dòng)狀態(tài)以及提升表面的色調(diào)。
required this.primary,
// 應(yīng)用于位于primary之上的內(nèi)容（圖標(biāo)、文本等）
required this.onPrimary,
//應(yīng)用于需要比primary更少?gòu)?qiáng)調(diào)的元素
Color? primaryContainer,
//應(yīng)用于位于 primary container頂部的內(nèi)容（圖標(biāo)、文本等）
Color? onPrimaryContainer,
//次要角色用于 UI 中不太突出的組件，例如 chips，同時(shí)擴(kuò)大了顏色表達(dá)的機(jī)會(huì)。
required this.secondary,
//在輔助上繪制時(shí)清晰易讀的顏色。
required this.onSecondary,
// 一種顏色，用于不需要強(qiáng)調(diào)次要的元素。
Color? secondaryContainer,
//在 secondaryContainer 上繪制時(shí)清晰易讀的顏色。
Color? onSecondaryContainer,
//tertiary用于對(duì)比重音，可用于平衡主色和輔助色或增加對(duì)元素的關(guān)注，例如輸入字段。 tertiary的作用留給制造商自行決定使用，旨在支持產(chǎn)品中更廣泛的顏色表達(dá)。
Color? tertiary,
//在第三級(jí)上繪制時(shí)清晰易讀的顏色。
Color? onTertiary,
//一種顏色，用于需要比第三級(jí)更少?gòu)?qiáng)調(diào)的元素。
Color? tertiaryContainer,
//在 tertiaryContainer 上繪制時(shí)清晰易讀的顏色。
Color? onTertiaryContainer,
//用于輸入驗(yàn)證錯(cuò)誤的顏色，例如對(duì)于 InputDecoration.errorText。
required this.error,
//A color that's clearly legible when drawn on error.
required this.onError,
//一種用于錯(cuò)誤元素的顏色，它需要的重點(diǎn)少于error。
Color? errorContainer,
//在 errorContainer 上繪制時(shí)清晰易讀的顏色。
Color? onErrorContainer,
/// 通常出現(xiàn)在可滾動(dòng)內(nèi)容后面的顏色。
required this.background,
required this.onBackground,
//Card等小部件的背景顏色。
required this.surface,
required this.onSurface,
//一種表面的顏色變體，可用于區(qū)分使用表面的組件。
Color? surfaceVariant,
Color? onSurfaceVariant,
Color? outline,
//一種用于繪制elevated 組件的陰影的顏色。
Color? shadow,
//一種表面顏色，用于顯示與周圍 UI 中看到的相反的內(nèi)容，例如在 SnackBar 中以引起對(duì)警報(bào)的注意。
Color? inverseSurface,
Color? onInverseSurface,
//一種強(qiáng)調(diào)色，用于在 inverseSurface 背景上顯示高亮顏色，例如 SnackBar 中的按鈕文本。
Color? inversePrimary,
//一種顏色，用作表面顏色上的overlay ，以指示組件的elevation。
Color? surfaceTint,
@Deprecated(
'Use primary or primaryContainer instead. '
'This feature was deprecated after v2.6.0-0.0.pre.'
)
Color? primaryVariant,
@Deprecated(
'Use secondary or secondaryContainer instead. '
'This feature was deprecated after v2.6.0-0.0.pre.'
)
Color? secondaryVariant,
})
primary.png
secondary.png
tertiary.png
- 其他顏色屬性
//
Color? colorSchemeSeed,
Brightness? brightness, //調(diào)整亮度白天模式和夜間模式
MaterialColor? primarySwatch,//Material風(fēng)格的組件提供主題色
Color? primaryColor,// 應(yīng)用程序主要部分的背景顏色(toolbars、tab bars 等)
Color? primaryColorLight,// primaryColor的淺色版
Color? primaryColorDark,// primaryColor的深色版
Color? focusColor,,//使用的焦點(diǎn)顏色表示組件具有輸入焦點(diǎn)
Color? hoverColor,//用于指示指針懸停顏色
Color? shadowColor, // 陰影層顏色
Color? canvasColor, //// MaterialType.canvas 的默認(rèn)顏色
Color? scaffoldBackgroundColor, // Scaffold的默認(rèn)顏色。典型Material應(yīng)用程序或應(yīng)用程序內(nèi)頁(yè)面的背景顏色。
Color? bottomAppBarColor,// BottomAppBar的默認(rèn)顏色
Color? cardColor,// Card的顏色
Color? dividerColor,// Divider和PopupMenuDivider的顏色，也用于ListTile之間、DataTable的行之間等。
Color? highlightColor,// 選中在潑墨動(dòng)畫期間使用的突出顯示顏色，或用于指示菜單中的項(xiàng)。
Color? splashColor, // 水波紋的顏色。InkWell
Color? selectedRowColor,// 用于突出顯示選定行的顏色。
Color? unselectedWidgetColor,// 用于處于非活動(dòng)(但已啟用)狀態(tài)的小部件的顏色。例如，未選中的復(fù)選框。通常與accentColor形成對(duì)比。也看到disabledColor。
Color? disabledColor,// 禁用狀態(tài)下部件的顏色，無(wú)論其當(dāng)前狀態(tài)如何。例如，一個(gè)禁用的復(fù)選框(可以選中或未選中)。
Color? secondaryHeaderColor,// 選定行時(shí)PaginatedDataTable標(biāo)題的顏色。
Color? backgroundColor, // 與主色形成對(duì)比的顏色，例如用作進(jìn)度條的剩余部分。
Color? dialogBackgroundColor, // Dialog 元素的背景顏色
Color? indicatorColor, // 選項(xiàng)卡中選定的選項(xiàng)卡指示器的顏色。
Color? hintColor, // 用于提示文本或占位符文本的顏色，例如在TextField中。
Color? errorColor, // 用于輸入驗(yàn)證錯(cuò)誤的顏色，例如在TextField中
Color? toggleableActiveColor,// 用于突出顯示Switch、Radio和Checkbox等可切換小部件的活動(dòng)狀態(tài)的顏色。
- 文本和排版
String? fontFamily,//字體
Typography? typography, //排版 可以產(chǎn)看https://material.io/design/typography/the-type-system.html
TextTheme? textTheme,//顏色與卡片和畫布顏色形成對(duì)比的文本
TextTheme? primaryTextTheme,//與原色形成對(duì)比的文本主題
IconThemeData? iconTheme,//與卡片和畫布顏色形成對(duì)比的圖標(biāo)主題
IconThemeData? primaryIconTheme,,//與原色形成對(duì)比的圖標(biāo)主題
//設(shè)置組件中Text的字體樣式
ThemeData(
// appBarTheme: AppBarTheme(titleTextStyle:TextStyle(color: Colors.red,fontSize: 30) ),//這里設(shè)置AppBar的背景顏色
textTheme: const TextTheme(
//用于 [showDatePicker] 顯示的對(duì)話框中的日期。
displayMedium: TextStyle(fontSize: 25.0, color: Colors.deepPurple),
//用于應(yīng)用欄和對(duì)話框中的主要文本（例如，[AppBar.title] 和 [AlertDialog.title]）。這里設(shè)置AppBar的title字體顏色是沒有用的
titleLarge: TextStyle(fontSize: 25.0, color: Colors.blue),
//用于列表中的主要文本（例如，[ListTile.title]）。
titleMedium: TextStyle(fontSize: 20.0, color: Colors.red),
// [Material]的默認(rèn)文本樣式。
bodyMedium: TextStyle(fontSize: 40, color: Colors.green),
// 用于 [ElevatedButton]、[TextButton] 和 [OutlinedButton] 上的文本。
labelLarge: TextStyle(fontSize: 40, color: Colors.yellow),
// 用于與圖像關(guān)聯(lián)的輔助文本。
bodySmall: TextStyle(fontSize: 40, color: Colors.cyan),
),
);
15.組件主題設(shè)置
AppBarTheme? appBarTheme,
MaterialBannerThemeData? bannerTheme,
BottomAppBarTheme? bottomAppBarTheme,
BottomNavigationBarThemeData? bottomNavigationBarTheme,
BottomSheetThemeData? bottomSheetTheme,
ButtonBarThemeData? buttonBarTheme,
ButtonThemeData? buttonTheme,
CardTheme? cardTheme,
CheckboxThemeData? checkboxTheme,
ChipThemeData? chipTheme,
DataTableThemeData? dataTableTheme,
DialogTheme? dialogTheme,
DividerThemeData? dividerTheme,
DrawerThemeData? drawerTheme,
ElevatedButtonThemeData? elevatedButtonTheme,
FloatingActionButtonThemeData? floatingActionButtonTheme,
ListTileThemeData? listTileTheme,
NavigationBarThemeData? navigationBarTheme,
NavigationRailThemeData? navigationRailTheme,
OutlinedButtonThemeData? outlinedButtonTheme,
PopupMenuThemeData? popupMenuTheme,
ProgressIndicatorThemeData? progressIndicatorTheme,
RadioThemeData? radioTheme,
SliderThemeData? sliderTheme,
SnackBarThemeData? snackBarTheme,
SwitchThemeData? switchTheme,
TabBarTheme? tabBarTheme,
TextButtonThemeData? textButtonTheme,
TextSelectionThemeData? textSelectionTheme,
TimePickerThemeData? timePickerTheme,
ToggleButtonsThemeData? toggleButtonsTheme,
TooltipThemeData? tooltipTheme,
ExpansionTileThemeData? expansionTileTheme,
AndroidOverscrollIndicator? androidOverscrollIndicator,
簡(jiǎn)單使用
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class AppThemeConfig {
//設(shè)置不允許字體放大
static const double textScaleFactor = 1.0;
//不允許字體跟隨系統(tǒng)變化
static Widget fixedTextScale(
{required BuildContext context, required Widget child}) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: textScaleFactor),
child: child);
}
//設(shè)置App支持的屏幕方向
static const List<DeviceOrientation> supportOrientations = [
DeviceOrientation.portraitUp
];
//runApp 之前調(diào)用
static void setupDevice() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.green, //狀態(tài)欄背景顏色
statusBarIconBrightness: Brightness.light // dark:一般顯示黑色 light：一般顯示白色
));
//設(shè)置屏幕的方向
SystemChrome.setPreferredOrientations(supportOrientations);
}
//[AppBar.title] 和 [AlertDialog.title]）等字體樣式
static const TextStyle titleLarge =
TextStyle(fontSize: 30.0, color: Colors.red);
//用于列表中的主要文本（例如，[ListTile.title]）。
static const TextStyle titleMedium =
TextStyle(fontSize: 25.0, color: Colors.blue);
// [Material]的默認(rèn)文本樣式。
static const TextStyle defaultStyle =
TextStyle(fontSize: 25.0, color: Colors.blue);
// 用于 [ElevatedButton]、[TextButton] 和 [OutlinedButton] 上的文本。
static const TextStyle buttonStyle =
TextStyle(fontSize: 25.0, color: Colors.blue);
//用于 [showDatePicker] 顯示的對(duì)話框中的日期。
static const TextStyle pickerStyle =
TextStyle(fontSize: 25.0, color: Colors.blue);
//字體
static const String fontFamily = '';
//AppBar標(biāo)題顏色
static const Color appBarTitleColor = Colors.green;
//AppBar背景顏色
static const Color appBarBgColor = Colors.green;
//Scaffold背景顏色
static const Color scaffoldBgColor = Colors.amberAccent;
static const Color dialogBgColor = Colors.white;
//可滾動(dòng)組件的背景顏色
static const Color scrollBgColor = Colors.cyan;
//頁(yè)面跳轉(zhuǎn)樣式
static const PageTransitionsTheme pageTransitionsTheme =
PageTransitionsTheme(builders: {
TargetPlatform.android: CupertinoPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder()
});
//ThemeData
static final ThemeData themeData = ThemeData(
brightness: Brightness.light,
pageTransitionsTheme: pageTransitionsTheme,
fontFamily: fontFamily,
textTheme: const TextTheme(
displayMedium: pickerStyle,
titleLarge: titleLarge,
titleMedium: titleMedium,
bodyMedium: defaultStyle,
labelLarge: buttonStyle,
),
scaffoldBackgroundColor: scaffoldBgColor,
dialogBackgroundColor: dialogBgColor,
colorScheme: const ColorScheme.light().copyWith(
primary: Colors.white,
background: scrollBgColor,
),
//去掉水波紋
splashColor: Colors.transparent,
appBarTheme: const AppBarTheme(
elevation: 1,
titleTextStyle: titleLarge,
backgroundColor: appBarBgColor),
tabBarTheme: const TabBarTheme(
labelColor: Colors.red,
labelStyle: TextStyle(fontSize: 20),
unselectedLabelColor: Colors.grey,
unselectedLabelStyle: TextStyle(fontSize: 20),
indicatorSize: TabBarIndicatorSize.label),
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
elevation: 1,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.red,
unselectedItemColor: Colors.grey,
selectedLabelStyle: TextStyle(fontSize: 12),
unselectedLabelStyle: TextStyle(fontSize: 12),
showSelectedLabels: true,
showUnselectedLabels: true),
bottomSheetTheme: const BottomSheetThemeData(
backgroundColor: Colors.white,
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
))),
dialogTheme: DialogTheme(
backgroundColor: Colors.white,
elevation: 1,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))),
//以下是可選的
textButtonTheme: const TextButtonThemeData(),
elevatedButtonTheme: const ElevatedButtonThemeData(),
outlinedButtonTheme: const OutlinedButtonThemeData());
}
