用于自定義應(yīng)用程序的主題顏色和排版等。
factory ThemeData({
Brightness brightness, // 應(yīng)用整體主題的亮度组去。用于按鈕之類的小部件,以確定在不使用主色或強(qiáng)調(diào)色時(shí)選擇什么顏色。
MaterialColor primarySwatch,// 定義一個(gè)單一的顏色以及十個(gè)色度的色塊。
Color primaryColor, // 應(yīng)用程序主要部分的背景顏色(toolbars垦写、tab bars 等)
Brightness primaryColorBrightness, // primaryColor的亮度。用于確定文本的顏色和放置在主顏色之上的圖標(biāo)(例如工具欄文本)彰触。
Color primaryColorLight, // primaryColor的淺色版
Color primaryColorDark, // primaryColor的深色版
Color accentColor, // 小部件的前景色(旋鈕梯投、文本、覆蓋邊緣效果等)。
Brightness accentColorBrightness, // accentColor的亮度分蓖。
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, // 選中在潑墨動(dòng)畫期間使用的突出顯示顏色午磁,或用于指示菜單中的項(xiàng)尝抖。
Color splashColor, // 墨水飛濺的顏色。InkWell
InteractiveInkFeatureFactory splashFactory, // 定義由InkWell和InkResponse反應(yīng)產(chǎn)生的墨濺的外觀迅皇。
Color selectedRowColor, // 用于突出顯示選定行的顏色。
Color unselectedWidgetColor, // 用于處于非活動(dòng)(但已啟用)狀態(tài)的小部件的顏色衙熔。例如登颓,未選中的復(fù)選框。通常與accentColor形成對(duì)比红氯。也看到disabledColor框咙。
Color disabledColor, // 禁用狀態(tài)下部件的顏色,無論其當(dāng)前狀態(tài)如何痢甘。例如喇嘱,一個(gè)禁用的復(fù)選框(可以選中或未選中)。
Color buttonColor, // RaisedButton按鈕中使用的Material 的默認(rèn)填充顏色塞栅。
ButtonThemeData buttonTheme, // 定義按鈕部件的默認(rèn)配置者铜,如RaisedButton和FlatButton。
Color secondaryHeaderColor, // 選定行時(shí)PaginatedDataTable標(biāo)題的顏色放椰。
Color textSelectionColor, // 文本框中文本選擇的顏色作烟,如TextField
Color cursorColor, // 文本框中光標(biāo)的顏色,如TextField
Color textSelectionHandleColor, // 用于調(diào)整當(dāng)前選定的文本部分的句柄的顏色砾医。
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, // 文本字體
TextTheme textTheme, // 文本的顏色與卡片和畫布的顏色形成對(duì)比兴猩。
TextTheme primaryTextTheme, // 與primaryColor形成對(duì)比的文本主題
TextTheme accentTextTheme, // 與accentColor形成對(duì)比的文本主題期吓。
InputDecorationTheme inputDecorationTheme, // 基于這個(gè)主題的 InputDecorator、TextField和TextFormField的默認(rèn)InputDecoration值。
IconThemeData iconTheme, // 與卡片和畫布顏色形成對(duì)比的圖標(biāo)主題
IconThemeData primaryIconTheme, // 與primaryColor形成對(duì)比的圖標(biāo)主題
IconThemeData accentIconTheme, // 與accentColor形成對(duì)比的圖標(biāo)主題讨勤。
SliderThemeData sliderTheme, // 用于呈現(xiàn)Slider的顏色和形狀
TabBarTheme tabBarTheme, // 用于自定義選項(xiàng)卡欄指示器的大小箭跳、形狀和顏色的主題。
CardTheme cardTheme, // Card的顏色和樣式
ChipThemeData chipTheme, // Chip的顏色和樣式
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize, // 配置某些Material部件的命中測試大小
PageTransitionsTheme pageTransitionsTheme,
AppBarTheme appBarTheme, // 用于自定義Appbar的顏色潭千、高度谱姓、亮度、iconTheme和textTheme的主題刨晴。
BottomAppBarTheme bottomAppBarTheme, // 自定義BottomAppBar的形狀屉来、高度和顏色的主題。
ColorScheme colorScheme, // 擁有13種顏色狈癞,可用于配置大多數(shù)組件的顏色茄靠。
DialogTheme dialogTheme, // 自定義Dialog的主題形狀
Typography typography, // 用于配置TextTheme、primaryTextTheme和accentTextTheme的顏色和幾何TextTheme值蝶桶。
CupertinoThemeData cupertinoOverrideTheme
})
在Flutter中有兩種方法來使用主題慨绳,一種是全局范圍的主題
new MaterialApp(
title: title,
theme: ThemeData(
primaryColor: Colors.red,
//...
),
);
一種是使用 Theme
Widget 創(chuàng)建局部主題,用于為某個(gè)頁面單獨(dú)設(shè)置主題
new Theme(
data: ThemeData(
accentColor: Colors.yellow,
//...
),
child: Text('Hello World'),
);
當(dāng)然真竖,如果你只是想改變部分主題樣式脐雪,可以使用 copyWith
方法來繼承App的主題,只覆蓋部分樣式恢共。
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: Text('copyWith method'),
);
創(chuàng)建好主題后战秋,要如何使用呢,在Widget的構(gòu)造方法里面通過Theme.of(context)
方法來調(diào)用讨韭。
Theme.of(context)
會(huì)查找Widget 樹脂信,并返回最近的一個(gè)Theme
對(duì)象。如果父層級(jí)上有Theme
對(duì)象拐袜,則返回這個(gè)Theme
,如果沒有吉嚣,就返回App的Theme
。
new Container(
color: Theme.of(context).accentColor,
chile: Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);