在main.dart文件MaterialApp中有theme主題設(shè)置
1. 創(chuàng)建應(yīng)用主題
ThemeData中包括很多參數(shù)弥搞,這里稍微詳細(xì)解答一下耿焊,以備以后使用
theme: ThemeData(
Brightness? brightness, // 應(yīng)用整體主題的亮度隶症,用于按鈕之類的小部件哩陕,已確定在使用主色或強(qiáng)調(diào)色時(shí)選擇什么顏色锦针。
VisualDensity? visualDensity, // 視覺密度
MaterialColor? primarySwatch, // 主題樣式拌消,設(shè)置primaryColor后該背景色會(huì)被覆蓋
Color? primaryColor, // 主要部分背景顏色(導(dǎo)航欄和tabBar等)
Brightness? primaryColorBrightness, // primaryColor的亮度
Color? primaryColorLight, // primaryColor的淺色版
Color? primaryColorDark, // primaryColor的深色版
Color? accentColor, // 前景色(文本和按鈕等)
Brightness? accentColorBrightness,
Color? canvasColor, // MaterialType.canvas的默認(rèn)顏色
Color? shadowColor, // 陰影顏色
Color? scaffoldBackgroundColor, // scaffold的背景顏色,典型Material應(yīng)用程序或應(yīng)用程序內(nèi)頁面的背景顏色挪捕。
Color? bottomAppBarColor, // BottomAppBar的默認(rèn)顏色粗梭。
Color? cardColor, // Card的顏色
Color? dividerColor, // Divider和popipMenuDivider的顏色,也用于ListTitle之間级零,DataTable的行之間断医。
Color? focusColor, // 突出顏色
Color? hoverColor, //
Color? highlightColor, // 高亮顏色,選中的潑墨動(dòng)畫期間使用的突出顯示顏色奏纪,或用于指示菜單中的項(xiàng)鉴嗤。
Color? splashColor,
InteractiveInkFeatureFactory? splashFactory,
Color? selectedRowColor, // 選中row的顏色
Color? unselectedWidgetColor,
Color? disabledColor, // 不可點(diǎn)擊時(shí)的顏色
Color? buttonColor, // RaiseButton按鈕的顏色、
ButtonThemeData? buttonTheme, // 定義按鈕的默認(rèn)主題
ToggleButtonsThemeData? toggleButtonsTheme,
Color? secondaryHeaderColor,
Color? textSelectionHandleColor,
Color? backgroundColor,
Color? dialogBackgroundColor,
Color? indicatorColor, // 選項(xiàng)卡中選定的選項(xiàng)卡指示器的顏色
Color? hintColor, // 用于提示文本或占位符文本的顏色序调,例如在TextField中醉锅。
AppBarTheme? appBarTheme, // 導(dǎo)航欄主題
ScrollbarThemeData? scrollbarTheme,
...
),
2. 局部主題
如果我們想在應(yīng)用程序的一部分中覆蓋應(yīng)用程序的全局的主題,我們可以將要覆蓋得部分封裝在一個(gè)Theme Widget中
有兩種方法可以解決這個(gè)問題:創(chuàng)建特有的ThemeData或擴(kuò)展父主題发绢。
創(chuàng)建特有的ThemeData
new Theme(
// Create a unique theme with "new ThemeData"
data: new ThemeData(
accentColor: Colors.yellow,
),
child: new FloatingActionButton(
onPressed: () {},
child: new Icon(Icons.add),
),
);
擴(kuò)展父主題
new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);
3. 創(chuàng)建常用控件顏色
在global.dart文件中, 設(shè)置全局顏色
final colorWith333333 = HexColor.fromHex("#333333");
final colorWith666666 = HexColor.fromHex("#666666");
final colorWith999999 = HexColor.fromHex("#999999");
final colorWithWhite = HexColor.fromHex("#ffffff");
final colorWithSeperation = HexColor.fromHex("#dfdfdf");
final colorWithBack = HexColor.fromHex("#eff1f7");
final colorWithLinkColor = HexColor.fromHex("#0081D1");