Theme
组件可以为Material APP定义主题数据(ThemeData)。Material
组件库里很多组件都使用了主题数据,如导航栏颜色、标题字体、Icon
样式等。Theme
内会使用InheritedWidget
来为其子树共享样式数据。
ThemeData
ThemeData
是Material
的主题数据,我们可以通过ThemeData
来自定义应用主题,我们可以通过Theme.of
来获取当前的ThemeData
。
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,
...
),
路由换肤功能
import 'package:flutter/material.dart';
class ThemePage extends StatefulWidget {
const ThemePage({Key? key}) : super(key: key);
@override
State<ThemePage> createState() => _ThemePageState();
}
class _ThemePageState extends State<ThemePage> {
var _themeColor = Colors.green;//当前路由主题色
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Theme(
data: ThemeData(
primarySwatch: _themeColor,//用于导航栏、FloatingActionButton的背景色等
iconTheme: IconThemeData(color: _themeColor)//用于Icon
),
child: Scaffold(
appBar: AppBar(title: const Text('路由换肤功能'),),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text('颜色跟随主题')
],
),
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(
color: Colors.black //为第二行Icon自定义颜色(固定为黑色)
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text('颜色固定颜色')
],
)
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
_themeColor = _themeColor == Colors.green ? Colors.blue : Colors.green;
});
},
child: const Icon(Icons.palette),
),
)
);
}
}