Flutter（三十二）ThemeData主题

说明

Flutter 预先定义了一系列的主题，各个widget都全部或局部使用了这些主题，因此当更改了预定义主题后，所有使用了这些主题的widget都会发生相应的变化。

原理

使用InheritedWidget，当共享数据发生变化时，依赖者也发生变化。

ThemeData属性

Brightness brightness, //深色还是浅色
MaterialColor primarySwatch, //备用主题颜色，如果没有设定primaryColor就使用该颜色
Color primaryColor, //主题主色，决定导航栏颜色
Color accentColor, //主题次级色，决定大多数Widget的颜色，如进度条、开关等。
Color cardColor, //卡片颜色
Color dividerColor, //分割线颜色
ButtonThemeData buttonTheme, //按钮主题
Color dialogBackgroundColor,//对话框背景颜色
String fontFamily, //文字字体
TextTheme textTheme,// 字体主题，包括标题、body等文字样式
IconThemeData iconTheme, // Icon的默认样式
TargetPlatform platform, //指定平台，应用特定平台控件风格
Brightness primaryColorBrightness,// 主题主色的深浅色
Color primaryColorLight,
Color primaryColorDark,
Brightness accentColorBrightness,
Color canvasColor,// 画布颜色
Color scaffoldBackgroundColor,
Color bottomAppBarColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
InteractiveInkFeatureFactory splashFactory,
Color selectedRowColor,
Color unselectedWidgetColor,
Color disabledColor,//禁用时的颜色
Color buttonColor,
ButtonThemeData buttonTheme,
Color secondaryHeaderColor,
Color textSelectionColor,
Color cursorColor,// 光标颜色
Color textSelectionHandleColor,
Color backgroundColor,// 背景颜色
Color dialogBackgroundColor,
Color indicatorColor,
Color hintColor,
Color errorColor,
Color toggleableActiveColor,
String fontFamily,
TextTheme textTheme,
TextTheme primaryTextTheme,
TextTheme accentTextTheme,
InputDecorationTheme inputDecorationTheme,
IconThemeData iconTheme,
IconThemeData primaryIconTheme,
IconThemeData accentIconTheme,
SliderThemeData sliderTheme,
TabBarTheme tabBarTheme,
CardTheme cardTheme,
ChipThemeData chipTheme,
TargetPlatform platform,
MaterialTapTargetSize materialTapTargetSize,
PageTransitionsTheme pageTransitionsTheme,
AppBarTheme appBarTheme,
BottomAppBarTheme bottomAppBarTheme,
ColorScheme colorScheme,
DialogTheme dialogTheme,
FloatingActionButtonThemeData floatingActionButtonTheme,
Typography typography,
CupertinoThemeData cupertinoOverrideTheme,
SnackBarThemeData snackBarTheme,
BottomSheetThemeData bottomSheetTheme,

image.png
image.png image.png

class _MyHomePageState extends State<MyHomePage> {
  Color swatchTheme = Colors.lightGreen;
  int index = 0;
  @override
  Widget build(BuildContext context) {
    ThemeData td = Theme.of(context);
    return Theme(
      data: ThemeData(
        primarySwatch: swatchTheme,
        iconTheme: IconThemeData(color: swatchTheme),
//        textTheme: TextTheme(body1: TextStyle(color: swatchTheme)),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.add),
                Icon(Icons.delete),
                Text('theme,使用了默认主题'), //会随着主题变色
              ],
            ),
            Theme(
              data: td.copyWith(//复制父类指定的theme，并修改局部
                iconTheme: td.iconTheme.copyWith(color: Colors.blue),
                textTheme: td.textTheme.copyWith(body1: TextStyle(color:Colors.blue)),
              ), // zi widget自定义icon的主题
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.add),
                  Icon(Icons.delete),
                  Text('theme,使用了自定义主题')
                ],
              ),
            ),
            Theme(
              data: ThemeData(// 完全使用新的自定义theme
                primarySwatch: Colors.pink,
                iconTheme: IconThemeData(color: Colors.pink),
                textTheme: TextTheme(body2: TextStyle(color: Colors.pink)),
              ), // zi widget自定义icon的主题
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.add),
                  Icon(Icons.delete),
                  Text('theme,使用了自定义主题')
                ],
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(
              () {
                index++;
                if (index & 3 == 0) {
                  swatchTheme = Colors.orange;
                }
                if (index & 3 == 1) {
                  swatchTheme = Colors.blue;
                }
                if (index & 3 == 2) {
                  swatchTheme = Colors.red;
                }
              },
            );
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

• 用Theme包裹住子孙widget
• 设定主题属性data，进行自定义。
• 子widget的theme可以覆盖父widget的theme。

欢迎关注我的公众号：Flutter和Dart开发实践

让我们共同学习进步，It is never too late to learn!

image.png