在main.dart文件MaterialApp中有theme主题设置
1. 创建应用主题
ThemeData中包括很多参数,这里稍微详细解答一下,以备以后使用
theme: ThemeData(
Brightness? brightness, // 应用整体主题的亮度,用于按钮之类的小部件,已确定在使用主色或强调色时选择什么颜色。
VisualDensity? visualDensity, // 视觉密度
MaterialColor? primarySwatch, // 主题样式,设置primaryColor后该背景色会被覆盖
Color? primaryColor, // 主要部分背景颜色(导航栏和tabBar等)
Brightness? primaryColorBrightness, // primaryColor的亮度
Color? primaryColorLight, // primaryColor的浅色版
Color? primaryColorDark, // primaryColor的深色版
Color? accentColor, // 前景色(文本和按钮等)
Brightness? accentColorBrightness,
Color? canvasColor, // MaterialType.canvas的默认颜色
Color? shadowColor, // 阴影颜色
Color? scaffoldBackgroundColor, // scaffold的背景颜色,典型Material应用程序或应用程序内页面的背景颜色。
Color? bottomAppBarColor, // BottomAppBar的默认颜色。
Color? cardColor, // Card的颜色
Color? dividerColor, // Divider和popipMenuDivider的颜色,也用于ListTitle之间,DataTable的行之间。
Color? focusColor, // 突出颜色
Color? hoverColor, //
Color? highlightColor, // 高亮颜色,选中的泼墨动画期间使用的突出显示颜色,或用于指示菜单中的项。
Color? splashColor,
InteractiveInkFeatureFactory? splashFactory,
Color? selectedRowColor, // 选中row的颜色
Color? unselectedWidgetColor,
Color? disabledColor, // 不可点击时的颜色
Color? buttonColor, // RaiseButton按钮的颜色、
ButtonThemeData? buttonTheme, // 定义按钮的默认主题
ToggleButtonsThemeData? toggleButtonsTheme,
Color? secondaryHeaderColor,
Color? textSelectionHandleColor,
Color? backgroundColor,
Color? dialogBackgroundColor,
Color? indicatorColor, // 选项卡中选定的选项卡指示器的颜色
Color? hintColor, // 用于提示文本或占位符文本的颜色,例如在TextField中。
AppBarTheme? appBarTheme, // 导航栏主题
ScrollbarThemeData? scrollbarTheme,
...
),
2. 局部主题
如果我们想在应用程序的一部分中覆盖应用程序的全局的主题,我们可以将要覆盖得部分封装在一个Theme Widget中
有两种方法可以解决这个问题:创建特有的ThemeData或扩展父主题。
创建特有的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),
),
);
扩展父主题
new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);
3. 创建常用控件颜色
在global.dart文件中, 设置全局颜色
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");