flutter中如何使用和扩展ThemeData实现详解

前言

做过UI开发的同学都知道，在开发中我们通常会将文字大小、色值等内容放在配置文件中，通过统一的管理类来读取（严禁在UI代码中写死）。以便后续调整时不用修改源码，只需要修改配置文件即可。

例如这样：

定义常量存放

/// 存放颜色常量abstract class ColorConfigs {  static const Color background = Color(0xFFFF6600);  static const Color textHint = Color(0xFFA0A4A7);}

通过统一获取

/// GOODContainer(  //通过 ColorConfig 获取色值  color: ColorConfigs.background,)/// BADContainer(  //写死  color: Color(0xFFFF6600),)

Flutter为我们提供了Theme类，可以让我们节省封装常量配置类（如上示例中的 ColorConfigs）的步骤。将色值、字体风格等配置内容存入ThemeData中，子控件可统一通过 Theme.of(context)读取 color、textStyle、等配置信息。

本篇通过换肤demo，介绍在flutter项目中如何使用 theme 以及如何对 themeData 进行字段扩展，实现全局的主题配置管理。

Theme 的基本使用方式

1. Theme 的注册

MaterialApp(  theme: myThemeData, //一个ThemeData的实例，下面提供具体代码  home: BodyWidget(),)

我们做全局的主体配置，在 MaterialApp 中对 theme 字段进行入参赋值。示例代码中的 myThemeData 是一个 ThemeData 的实现实例，可通过 ThemeData 的构造方法来查看其可供保存的主体及样式信息，按照各自所需进行参数赋值。

下面是小编在自己项目中用到的ThemeData配置项，定义了各种状态颜色、字体样式、可供参考：

myThemeData：

val myThemeData = ThemeData(  primaryColor: Colors.white,  disabledColor: const Color(0xffcbced0),  backgroundColor: const Color(0xfff3f4f5),  hintColor: const Color(0xffe2e5e7),  errorColor: const Color(0xffe21a1a),  highlightColor: const Color(0xffa7d500),  shadowColor: const Color(0xffa0a4a7),  selectedRowColor: const Color(0xfff3f4f5),  colorScheme: const ColorScheme.light(    primary: Colors.white,    secondary: Color(0xffa7d500),    background: Color(0xfff3f4f5),    error: Color(0xffe21a1a),    onPrimary: Color(0xff242524),    onError: Colors.white,    onBackground: Color(0xffe2e5e7),    onSecondary: Color(0xff707275),  ),  textTheme: TextTheme(    headline1: TextStyle(      fontSize: 17.sp,      fontWeight: FontWeight.bold,      color: const Color(0xff242524),    ),    headline2: TextStyle(      fontSize: 16.sp,      fontWeight: FontWeight.bold,      color: const Color(0xff242524),    ),    ...中间省略 healin3 ~ headline5,只是配置不一样    headline6: TextStyle(      fontSize: 14.sp,      fontWeight: FontWeight.bold,      color: const Color(0xff707275),    ),    subtitle1: TextStyle(      fontSize: 12.sp,      fontWeight: FontWeight.w500,      color: const Color(0xff242524),    ),    subtitle2: TextStyle(      fontSize: 12.sp,      fontWeight: FontWeight.w500,      color: const Color(0xff707275),    ),    bodyText1: TextStyle(      fontSize: 11.sp,      fontWeight: FontWeight.normal,      color: const Color(0xff242524),    ),    bodyText2: TextStyle(      fontSize: 11.sp,      fontWeight: FontWeight.normal,      color: const Color(0xff242524),    ),  ),)

2. 读取 ThemeData 里的配置：

@overrideWidget build(BuildContext context) {  return Container(    color: Theme.of(context).backgroundColor,    child: Text(        'hellow',         style: Theme.of(context).headline).bodyText1,  );}

Theme.of(context).backgroundColor：读取主题配置中的背景颜色，在 myThemeData 中进行过赋值操作
Theme.of(context).headline).bodyText1：读取主题配置中键值为 bodyText1 的字体样式

小技巧介绍

通常为了便于开发阅读，我们也可以使用extension对 ThemeData 内属性进行重命名获取：

新建 extension_theme.dart，文件名字随意：

///用于重命名颜色属性extension ThemeDataColorExtension on ThemeData {  Color get bgColor => colorScheme.onBackground; ...}///用于重命名字体样式属性extension ThemeDataTextStyleExtension on ThemeData {  TextStyle get bodyStyle => textTheme.bodyText1!; ...}

在UI页面进行引用导入使用，上面的 demo 可改为：

import ./extension_theme.dart...@overrideWidget build(BuildContext context) {  return Container(    color: Theme.of(context).bgColor,    child: Text(        'hellow',         style: Theme.of(context).bodyStyle,  );}

ThemeData 内置字段不够用，如何扩展？

从 ThemeData 的构造函数中我们可以看到，ThemeData 内置的字段是有限的。假如我们的UI设计包含的色值数量或者字体样式数量超出了 ThemeData 可供设置数量怎么办呢？

比如：我们想新增一个色值配置，名字就叫 connerColor，我们还想保持统一，一律通过 ThemeData 来统一读取统一配置，要如何处理呢？

小编在项目里是这么做的，将 ThemeData 进行一层封装，以新增 connerColor 为例，具体代码结合下面👇🏻的一键换肤查询。

如何实现一键换肤

有了ThemeData作为统一管理存放配置信息后，实现一键换肤的思路就很清晰了，大致是这样的：

从上图可以看到，除了需要ThemeData用于存放配置信息，我们还需要封装一个监听类用于监听选中主题发生变更，这个功能我们在下面用provider来实现。

1. 首先在 yaml 新增引入 provider

dependencies:  provider: ^6.0.2

2. 创建主题枚举

假设我们提供两种主题切换

///主题类型enum ThemeEnum {  yellow,  red,}

3. ThemeData 进行一层封装处理

我们对 ThemeData 进行一层封装处理，添加 connerColor 进行颜色字段扩展

///自定义模型，包装一下 themeDataclass ThemeItem {  final ThemeEnum themeEnum;  final ThemeData themeData;  // 扩展一个字段，用于表示自定义色值  final Color connerColor;  ThemeItem(    this.themeEnum,    this.themeData, {    required this.connerColor,  });}

4. 创建一个主题管理类 ThemeConfig

abstract class ThemeConfig {  ///记录当前选中主题  static late ThemeItem _currentTheme;  static ThemeData get currentThemeData => _currentTheme.themeData;  static ThemeEnum get currentTheme => _currentTheme.themeEnum;  ///提供获取扩展的色值  static Color? get connerColor => _currentTheme.connerColor;  ///设置选中主题，提供外部调用，更换当前主题  static void initTheme(ThemeItem theme) {    _currentTheme = theme;  }}

5. 通过ThemeData进行读取保持统一

为保持统一通过ThemeData进行读取，使用extension对新增字段connerColor进行读取扩展

extension ExTheme on ThemeData {  ///扩展获取自定义色值  Color get connerColor =&gt; ThemeConfig.connerColor!;}

6. 基于 provider 的使用

我们添加一个工具类，用于通知设置主题变更

class AppInfoProvider with ChangeNotifier {  ThemeData get currentTheme => ThemeConfig.currentThemeData;  ///切换主题  setTheme(ThemeItem theme) {    ThemeConfig.initTheme(theme);    notifyListeners();  }}

切换主题时，直接调用：

Provider.of<AppInfoProvider>(context, listen: false).setTheme(themeItem);

7. 创建一个主题仓库，里面存放两套主题，用于演示 Demo

///主题仓库abstract class ThemeStore {  static List<ThemeItem> themes = [    //红色主题    ThemeItem(      ThemeEnum.yellow,      ThemeData(        primaryColor: Colors.yellow,        backgroundColor: Colors.yellow,      ),      connerColor: Colors.blue,    ),    //黄色主题    ThemeItem(      ThemeEnum.red,      ThemeData(        primaryColor: Colors.red,        backgroundColor: Colors.red,      ),      connerColor: Colors.green,    ),  ];}

8.完整的 demo 代码及效果

main.dart

void main() {  ///初始化主题  ThemeConfig.initTheme(    ThemeStore.themes.first,  );  runApp(const Material(    child: MyApp(),  ));}class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return MultiProvider(      providers: [        ChangeNotifierProvider.value(value: AppInfoProvider()),      ],      child: Consumer<AppInfoProvider>(        builder: (context, appInfo, _) {          return MaterialApp(            theme: appInfo.currentTheme,            home: Column(              mainAxisSize: MainAxisSize.max,              mainAxisAlignment: MainAxisAlignment.center,              children: const [                BodyWidget(),                SizedBox(                  height: 30,                ),                _ThemePageButton(),              ],            ),          );        },      ),    );  }}class _ThemePageButton extends StatelessWidget {  const _ThemePageButton({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return TextButton(      onPressed: () {        Navigator.push(          context,          MaterialPageRoute(            builder: (context) => const ThemeSetWidget(),          ),        );      },      child: const Text('打开主题设置页面'),    );  }}

body_widget

class BodyWidget extends StatelessWidget {  const BodyWidget({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Container(      height: 300,      width: 300,      //读取标准色值      color: Theme.of(context).backgroundColor,      child: Center(        child: Container(          height: 100,          width: 150,          //读取自定义色值          color: Theme.of(context).connerColor,        ),      ),    );  }}

两个方块，外层方块读取的 ThemeData 标注字段色值，内层方块读取扩展字段色值。统一通过 ThemeData 读取。

theme_set_widget

extension ExThemeEnum on ThemeEnum {  Color get value {    switch (this) {      case ThemeEnum.yellow:        return Colors.yellow;      case ThemeEnum.red:        return Colors.red;    }  }}

///主题选择页面class ThemeSetWidget extends StatelessWidget {  const ThemeSetWidget({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text("颜色主题"),        backgroundColor: Theme.of(context).backgroundColor,      ),      body: ExpansionTile(        leading: const Icon(Icons.color_lens),        title: const Text('颜色主题'),        initiallyExpanded: true,        children: <Widget>[          Padding(            padding: const EdgeInsets.only(              left: 10,              right: 10,              bottom: 10,            ),            child: Wrap(              spacing: 8,              runSpacing: 8,              children: ThemeStore.themes                  .map((e) => _createItemWidget(context, e))                  .toList(),            ),          )        ],      ),    );  }  Widget _createItemWidget(    BuildContext context,    ThemeItem theme,  ) {    return InkWell(      onTap: () {        Provider.of<AppInfoProvider>(context, listen: false).setTheme(theme);      },      child: Container(        width: 40,        height: 40,        color: theme.themeEnum.value,        child: ThemeConfig.currentTheme == theme.themeEnum            ? const Icon(                Icons.done,                color: Colors.white,              )            : null,      ),    );  }}

以上就是flutter中如何使用和扩展ThemeData实现详解的详细内容