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惊豺，添加一個半透明的遮罩，
用來凸顯陰影效果茫负， 效果如下，可以看出乱凿，當(dāng)為true的時候划鸽，背景會白一些。這個屬性只適用于Material 2的dark theme疏唾，在Material 3中是無效的牌废。
applyElevationOverlayColor_false.png
applyElevationOverlayColor_true.png
2.cupertinoOverrideTheme用來設(shè)置iOS組件的樣式
//沒有為屬性設(shè)置默認(rèn)值
class NoDefaultCupertinoThemeData {
const NoDefaultCupertinoThemeData({
this.brightness,
//這個顏色一般用在按鈕和可點擊的文本和圖標(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 用來添加自定義的主題顏色
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 小部件的點擊目標(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 {
/// 將最小點擊目標(biāo)大小擴展為 48px x 48px技肩。
///
/// 這是 [ThemeData.materialTapTargetSize] 的默認(rèn)值和
/// 推薦大小以符合 Android 可訪問性掃描儀
/// 建議筑煮。
padded,
/// 將點擊目標(biāo)尺寸縮小到Material 規(guī)范提供的最小值软啼。
shrinkWrap,
}
- pageTransitionsTheme 定義[MaterialPageRoute]使用的頁面過渡動畫
/// 定義[MaterialPageRoute]使用的頁面過渡動畫
/// 用于不同的 [TargetPlatform]贿条。
///
/// [MaterialPageRoute.buildTransitions] 方法使用 `Theme.of(context).pageTransitionsTheme` 查找當(dāng)前當(dāng)前的 [PageTransitionsTheme] 并委托給 [buildTransitions]人断。如果未找到具有匹配平臺的構(gòu)建器，則使用 [FadeUpwardsPageTransitionsBuilder]漩符。
///
/// 也可以看看：
///
/// * [ThemeData.pageTransitionsTheme]一喘，定義默認(rèn)頁面
/// 整體主題的過渡。
/// * [FadeUpwardsPageTransitionsBuilder]嗜暴，定義了一個頁面過渡
/// 與Android O提供的類似凸克。
/// * [OpenUpwardsPageTransitionsBuilder]，定義了一個頁面過渡
/// 這與Android P提供的類似闷沥。
/// * [ZoomPageTransitionsBuilder]萎战，定義了默認(rèn)的頁面過渡
/// 這和Android Q提供的類似。
/// * [CupertinoPageTransitionsBuilder]舆逃，定義一個水平頁面
/// 匹配原生 iOS 頁面轉(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)的平臺±雷妫可用于確定 [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 自定義[滾動條]顏色炊琉、粗細(xì)和形狀的主題展蒂。
//定義后代 [Scrollbar] 小部件的默認(rèn)屬性值又活。
/// 后代小部件通過 `ScrollbarTheme.of(context)` 獲取當(dāng)前的 [ScrollbarThemeData] 對象。 [ScrollbarThemeData] 的實例可以使用 [ScrollbarThemeData.copyWith] 進行自定義锰悼。
///
/// 通常柳骄，[ScrollbarTheme] 的 [ScrollbarThemeData] 被指定為帶有 [ThemeData.scrollbarTheme] 的整體 [Theme] 的一部分。
///
/// 所有 [ScrollbarThemeData] 屬性默認(rèn)為 `null`箕般。 當(dāng)為空時耐薯，
/// [滾動條] 計算自己的默認(rèn)值，通乘坷铮基于整體
/// 主題的 [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 中組件的“緊湊性”幌绍。它是無單位的颁褂，因為它對不同的 UI 組件意味著不同的東西。
///
/// 垂直和水平的視覺密度默認(rèn)為零
/// 密度傀广，對應(yīng)Material Design規(guī)范中組件的默認(rèn)視覺密度颁独。它不影響文本大小、圖標(biāo)大小或填充值伪冰。
/// 例如奖唯，對于按鈕，它會影響按鈕子元素周圍的間距糜值。對于列表丰捷，它會影響列表中條目基線之間的距離。對于芯片寂汇，它只影響垂直尺寸病往，而不影響水平尺寸。
/// 以下是一些響應(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 功能的臨時標(biāo)志骄瓣。
/// 用于選擇加入 Material 3 功能的臨時標(biāo)志停巷。
/// 如果為 true，則已遷移到 Material 3 的組件將使用 Material 3 的新顏色榕栏、排版和其他功能畔勤。
///如果為 false，它們將使用 Material 2 的外觀扒磁。如果在 [useMaterial3] 設(shè)置為 true 的情況下構(gòu)造 [ThemeData]庆揪，則某些屬性將獲得特殊的默認(rèn)值。
///但是妨托，僅復(fù)制 [useMaterial3] 設(shè)置為 true 的 [ThemeData] 不會更改生成的 [ThemeData] 中的任何這些屬性缸榛。
///這些屬性是：
/// | Property | Material 3 default | Fallback default |
/// | :-------------- | :--------------------------- | :------------------------ |
/// | [typography] | [Typography.material2021] | [Typography.material2014] |
/// | [splashFactory] | [InkSparkle]* or [InkRipple] | [InkSplash] |
/// 在遷移到 Material 3 期間吝羞，打開它可能會在您的應(yīng)用中產(chǎn)生不一致的外觀。一些組件將在其他組件之前遷移内颗，并且排版更改將分階段進行钧排。
/// [useMaterial3] 默認(rèn)為 false。在所有遷移的組件都登陸穩(wěn)定后均澳，我們將默認(rèn)將其更改為 true恨溜。在該更改登陸穩(wěn)定版后，我們將棄用此標(biāo)志并刪除它的所有用途找前。那時一切都將使用 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用于整個 UI 的關(guān)鍵組件系吭，例如 FAB、突出按鈕和活動狀態(tài)颗品。
/// * Secondary colors 用于UI中不太突出的組件肯尺，例如濾鏡芯片，同時擴大了顏色表達(dá)的機會躯枢。
/// * Tertiary colors 用于對比強調(diào)色则吟，可用于平衡原色和二次色或提高對元素的關(guān)注，例如輸入字段锄蹂。第三色留給制造商自行決定使用氓仲，旨在支持
產(chǎn)品中更廣泛的色彩表達(dá)。
/// 該方案的其余顏色由用于背景和表面的中性顏色以及用于錯誤得糜、分隔線和陰影的特定顏色組成敬扛。
/// 許多顏色都有匹配的“on”顏色，用于在匹配顏色之上繪制內(nèi)容朝抖。例如啥箭，如果某物使用 [primary] 作為背景顏色，則 [onPrimary] 將用于在其上繪制文本和圖標(biāo)治宣。出于這個原因急侥，“打開”顏色應(yīng)與其匹配顏色具有至少 4.5:1 的對比度，以便可讀侮邀。
/// 如果未提供顏色坏怪，將使用與給定顏色最接近的備用顏色（例如 [primaryContainer] 將默認(rèn)為 [primary]）。 Material Design 3 將這些顏色用于許多組件的默認(rèn)設(shè)置绊茧，因此為了獲得最佳效果铝宵，應(yīng)用程序應(yīng)該
為所有參數(shù)提供顏色。確保這一點的一種簡單方法是
使用 [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,
// 主要角色用于整個 UI 中的關(guān)鍵組件唯绍，例如 FAB(FloatingActionButton)拼岳、突出按鈕、活動狀態(tài)以及提升表面的色調(diào)况芒。
required this.primary,
// 應(yīng)用于位于primary之上的內(nèi)容（圖標(biāo)惜纸、文本等）
required this.onPrimary,
//應(yīng)用于需要比primary更少強調(diào)的元素
Color? primaryContainer,
//應(yīng)用于位于 primary container頂部的內(nèi)容（圖標(biāo)、文本等）
Color? onPrimaryContainer,
//次要角色用于 UI 中不太突出的組件绝骚，例如 chips耐版，同時擴大了顏色表達(dá)的機會。
required this.secondary,
//在輔助上繪制時清晰易讀的顏色压汪。
required this.onSecondary,
// 一種顏色粪牲，用于不需要強調(diào)次要的元素。
Color? secondaryContainer,
//在 secondaryContainer 上繪制時清晰易讀的顏色止剖。
Color? onSecondaryContainer,
//tertiary用于對比重音腺阳，可用于平衡主色和輔助色或增加對元素的關(guān)注，例如輸入字段穿香。 tertiary的作用留給制造商自行決定使用亭引，旨在支持產(chǎn)品中更廣泛的顏色表達(dá)。
Color? tertiary,
//在第三級上繪制時清晰易讀的顏色皮获。
Color? onTertiary,
//一種顏色焙蚓，用于需要比第三級更少強調(diào)的元素。
Color? tertiaryContainer,
//在 tertiaryContainer 上繪制時清晰易讀的顏色洒宝。
Color? onTertiaryContainer,
//用于輸入驗證錯誤的顏色购公，例如對于 InputDecoration.errorText。
required this.error,
//A color that's clearly legible when drawn on error.
required this.onError,
//一種用于錯誤元素的顏色雁歌，它需要的重點少于error宏浩。
Color? errorContainer,
//在 errorContainer 上繪制時清晰易讀的顏色。
Color? onErrorContainer,
/// 通常出現(xiàn)在可滾動內(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 中以引起對警報的注意华嘹。
Color? inverseSurface,
Color? onInverseSurface,
//一種強調(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,,//使用的焦點顏色表示組件具有輸入焦點
Color? hoverColor,//用于指示指針懸停顏色
Color? shadowColor, // 陰影層顏色
Color? canvasColor, //// MaterialType.canvas 的默認(rèn)顏色
Color? scaffoldBackgroundColor, // Scaffold的默認(rèn)顏色。典型Material應(yīng)用程序或應(yīng)用程序內(nèi)頁面的背景顏色型宝。
Color? bottomAppBarColor,// BottomAppBar的默認(rèn)顏色
Color? cardColor,// Card的顏色
Color? dividerColor,// Divider和PopupMenuDivider的顏色八匠，也用于ListTile之間、DataTable的行之間等趴酣。
Color? highlightColor,// 選中在潑墨動畫期間使用的突出顯示顏色梨树，或用于指示菜單中的項。
Color? splashColor, // 水波紋的顏色岖寞。InkWell
Color? selectedRowColor,// 用于突出顯示選定行的顏色抡四。
Color? unselectedWidgetColor,// 用于處于非活動(但已啟用)狀態(tài)的小部件的顏色。例如仗谆，未選中的復(fù)選框指巡。通常與accentColor形成對比。也看到disabledColor胸私。
Color? disabledColor,// 禁用狀態(tài)下部件的顏色厌处，無論其當(dāng)前狀態(tài)如何。例如岁疼，一個禁用的復(fù)選框(可以選中或未選中)阔涉。
Color? secondaryHeaderColor,// 選定行時PaginatedDataTable標(biāo)題的顏色。
Color? backgroundColor, // 與主色形成對比的顏色捷绒，例如用作進度條的剩余部分瑰排。
Color? dialogBackgroundColor, // Dialog 元素的背景顏色
Color? indicatorColor, // 選項卡中選定的選項卡指示器的顏色。
Color? hintColor, // 用于提示文本或占位符文本的顏色暖侨，例如在TextField中椭住。
Color? errorColor, // 用于輸入驗證錯誤的顏色，例如在TextField中
Color? toggleableActiveColor,// 用于突出顯示Switch字逗、Radio和Checkbox等可切換小部件的活動狀態(tài)的顏色京郑。
- 文本和排版
String? fontFamily,//字體
Typography? typography, //排版 可以產(chǎn)看https://material.io/design/typography/the-type-system.html
TextTheme? textTheme,//顏色與卡片和畫布顏色形成對比的文本
TextTheme? primaryTextTheme,//與原色形成對比的文本主題
IconThemeData? iconTheme,//與卡片和畫布顏色形成對比的圖標(biāo)主題
IconThemeData? primaryIconTheme,,//與原色形成對比的圖標(biāo)主題
//設(shè)置組件中Text的字體樣式
ThemeData(
// appBarTheme: AppBarTheme(titleTextStyle:TextStyle(color: Colors.red,fontSize: 30) ),//這里設(shè)置AppBar的背景顏色
textTheme: const TextTheme(
//用于 [showDatePicker] 顯示的對話框中的日期。
displayMedium: TextStyle(fontSize: 25.0, color: Colors.deepPurple),
//用于應(yīng)用欄和對話框中的主要文本（例如葫掉，[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,
簡單使用
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] 顯示的對話框中的日期症副。
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;
//可滾動組件的背景顏色
static const Color scrollBgColor = Colors.cyan;
//頁面跳轉(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());
}
