介绍

动态切换主题功能，使用Provider状态管理完成

学习本章内容，必须掌握Provider状态管理，如果有不太理解的同学，请打开我的主页搜索 Provider 观看后再返回观看本博客

主题样式大全

factory ThemeData({
  Brightness brightness, // 应用整体主题的亮度。用于按钮之类的小部件，以确定在不使用主色或强调色时选择什么颜色。
  MaterialColor primarySwatch,// 定义一个单一的颜色以及十个色度的色块。
  Color primaryColor, // 应用程序主要部分的背景颜色(toolbars、tab bars 等)
  Brightness primaryColorBrightness, // primaryColor的亮度。用于确定文本的颜色和放置在主颜色之上的图标(例如工具栏文本)。
  Color primaryColorLight, // primaryColor的浅色版
  Color primaryColorDark, // primaryColor的深色版
  Color accentColor, // 小部件的前景色(旋钮、文本、覆盖边缘效果等)。
  Brightness accentColorBrightness, // accentColor的亮度。
  Color canvasColor, //  MaterialType.canvas 的默认颜色
  Color scaffoldBackgroundColor, // Scaffold的默认颜色。典型Material应用程序或应用程序内页面的背景颜色。
  Color bottomAppBarColor, // BottomAppBar的默认颜色
  Color cardColor, // Card的颜色
  Color dividerColor, // Divider和PopupMenuDivider的颜色，也用于ListTile之间、DataTable的行之间等。
  Color highlightColor, // 选中在泼墨动画期间使用的突出显示颜色，或用于指示菜单中的项。
  Color splashColor,  // 墨水飞溅的颜色。InkWell
  InteractiveInkFeatureFactory splashFactory, // 定义由InkWell和InkResponse反应产生的墨溅的外观。
  Color selectedRowColor, // 用于突出显示选定行的颜色。
  Color unselectedWidgetColor, // 用于处于非活动(但已启用)状态的小部件的颜色。例如，未选中的复选框。通常与accentColor形成对比。也看到disabledColor。
  Color disabledColor, // 禁用状态下部件的颜色，无论其当前状态如何。例如，一个禁用的复选框(可以选中或未选中)。
  Color buttonColor, // RaisedButton按钮中使用的Material 的默认填充颜色。
  ButtonThemeData buttonTheme, // 定义按钮部件的默认配置，如RaisedButton和FlatButton。
  Color secondaryHeaderColor, // 选定行时PaginatedDataTable标题的颜色。
  Color textSelectionColor, // 文本框中文本选择的颜色，如TextField
  Color cursorColor, // 文本框中光标的颜色，如TextField
  Color textSelectionHandleColor,  // 用于调整当前选定的文本部分的句柄的颜色。
  Color backgroundColor, // 与主色形成对比的颜色，例如用作进度条的剩余部分。
  Color dialogBackgroundColor, // Dialog 元素的背景颜色
  Color indicatorColor, // 选项卡中选定的选项卡指示器的颜色。
  Color hintColor, // 用于提示文本或占位符文本的颜色，例如在TextField中。
  Color errorColor, // 用于输入验证错误的颜色，例如在TextField中
  Color toggleableActiveColor, // 用于突出显示Switch、Radio和Checkbox等可切换小部件的活动状态的颜色。
  String fontFamily, // 文本字体
  TextTheme textTheme, // 文本的颜色与卡片和画布的颜色形成对比。
  TextTheme primaryTextTheme, // 与primaryColor形成对比的文本主题
  TextTheme accentTextTheme, // 与accentColor形成对比的文本主题。
  InputDecorationTheme inputDecorationTheme, // 基于这个主题的 InputDecorator、TextField和TextFormField的默认InputDecoration值。
  IconThemeData iconTheme, // 与卡片和画布颜色形成对比的图标主题
  IconThemeData primaryIconTheme, // 与primaryColor形成对比的图标主题
  IconThemeData accentIconTheme, // 与accentColor形成对比的图标主题。
  SliderThemeData sliderTheme,  // 用于呈现Slider的颜色和形状
  TabBarTheme tabBarTheme, // 用于自定义选项卡栏指示器的大小、形状和颜色的主题。
  CardTheme cardTheme, // Card的颜色和样式
  ChipThemeData chipTheme, // Chip的颜色和样式
  TargetPlatform platform, 
  MaterialTapTargetSize materialTapTargetSize, // 配置某些Material部件的命中测试大小
  PageTransitionsTheme pageTransitionsTheme, 
  AppBarTheme appBarTheme, // 用于自定义Appbar的颜色、高度、亮度、iconTheme和textTheme的主题。
  BottomAppBarTheme bottomAppBarTheme, // 自定义BottomAppBar的形状、高度和颜色的主题。
  ColorScheme colorScheme, // 拥有13种颜色，可用于配置大多数组件的颜色。
  DialogTheme dialogTheme, // 自定义Dialog的主题形状
  Typography typography, // 用于配置TextTheme、primaryTextTheme和accentTextTheme的颜色和几何TextTheme值。
  CupertinoThemeData cupertinoOverrideTheme 
})

实战

引入包

由于用到了 Provider状态管理 跟 shared_preferences数据持久化
所以先引入一下，打开Flutter项目跟目录的pubspec.yaml

  shared_preferences: ^0.5.12+4
  provider: ^4.3.2+3

添加全局主题颜色

要设置主题，首先要知道自己的app需要多少种主题(颜色)，这个主题我们要定义一个全局list出来

在项目跟目录 lib 下新建 global文件夹 在文件夹下新建 global_theme.dart文件 用来保存全局主题颜色，代码如下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

final List<Color> themeList = [
  Colors.blue,
  Colors.black,
  Colors.red,
  Colors.purple,
  Colors.indigo,
  Colors.yellow,
  Colors.green,
];

我们就定义这几种颜色，大家如需要更多，可以自己定义

添加全局主题状态

由于我们的主题是动态的，所以改变后需要通知界面刷新，这里就要用到状态管理了，如果不熟悉 Provider状态管理 请先学习后在看

在项目跟目录 lib 下新建 provider文件夹 在文件夹下新建 theme_provider.dart文件 用来保存当前主题状态值，如果改变后，则会自动刷新用到此状态的ui，这就是状态管理的好处

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:zhong_mei_utils_flutter/global/Global.dart';

//类型随便取，继承ChangeNotifier
class ThemeProvider with ChangeNotifier {
  Color _color = themeList.first;//默认是我们设置的主题颜色列表第一个

  void setTheme(int index) {//给外部提供修改主题的方法
    print(index.toString());
    _color = themeList[index];
    notifyListeners();
  }

  Color get color => _color;//获取当前主题
}

主题状态类创建好了，添加到项目里，让项目管理此状态
修改main.dart

return runApp(MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (context) => UserProvider()),
            ChangeNotifierProvider(create: (context) => ThemeProvider()),
          ],
          child: MyApp(),
        ));

主题状态设置完毕，接下来使用全局主题状态

一般来说，一个app只有一个MaterialApp，我们主题设置在MaterialApp，所以找到我们的MaterialApp，添加以下代码

return MaterialApp(
      theme: ThemeData.light().copyWith(
        primaryColor: Provider.of<ThemeProvider>(context).color,
        buttonTheme: ButtonThemeData(
          buttonColor: Provider.of<ThemeProvider>(context).color,
          textTheme: ButtonTextTheme.normal,
        ),
      ),

上段代码设置了app主题颜色跟按钮颜色使用状态管理里的颜色，而按钮文本颜色则是高亮，如果按钮背景色是黑色，那么按钮文字颜色自动白色

主题修改界面

在 lib 下添加 settings_theme.dart.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:weui/icon/index.dart';
import 'package:zhong_mei_utils_flutter/global/Global.dart';
import 'package:zhong_mei_utils_flutter/provider/ThemeProvider.dart';

class SettingsView extends StatefulWidget {
  @override
  _SettingsViewState createState() => _SettingsViewState();
}

class _SettingsViewState extends State<SettingsView> {
  int _index;//我们当前主题设置的是 全局主题列表中的第几个？
  @override
  void initState() {
    super.initState();
    loadData();//查询当前持久化数据
  }

  void loadData() async {
    SharedPreferences sp = await SharedPreferences.getInstance();//获取持久化操作对象
    setState(() {
      _index = sp.getInt("theme") ?? 0;//查询持久化框架中保存的theme字段，如果是null则默认是0
    });
  }

  Widget _itemBuilder(BuildContext context, int index) {
    return GestureDetector(
      child: Container(
        width: double.infinity,
        height: 50,
        margin: EdgeInsets.only(top: 10, bottom: 10),
        decoration: BoxDecoration(
          color: themeList[index],
          borderRadius: BorderRadius.all(Radius.circular(20)),
        ),
        child: _index != index
            ? Text("")//如果没选中则无东西
            : Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Icon(
                    WeIcons.hook,//如果选中了则给一个图标，这个图标是一个对勾，大家可以自己找
                    color: Colors.white,
                  ),
                  SizedBox(width: 16),
                ],
              ),
      ),
      onTap: () async {
        SharedPreferences sp = await SharedPreferences.getInstance();
        sp.setInt("theme", index);//点击后，修改持久化框架里的theme数据库
        Provider.of<ThemeProvider>(context, listen: false).setTheme(index);//修改全局状态为选中的值
        setState(() {
          _index = index;//设置当前界面选种值，刷新对勾
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("设置主题"),
        centerTitle: true,
        elevation: 10,
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Scrollbar(
          child: ListView.builder(
            itemBuilder: _itemBuilder,
            itemCount: themeList.length,
          ),
        ),
      ),
    );
  }
}

这时候已经完成了，但是有一个问题，就是我们正常使用都没有问题，但是退出app再进来，我们没有读取持久化保存的主题，所以又变默认第一个颜色

这时候我们想读取数据看中的主题，先了解一个概念
app启动时，都有白屏，一般开发者会做一个启动图，来掩盖白屏，我们这里需要知道，白屏是因为app在加载一些东西，还没有渲染界面，那么我们加载主题也应该在app启动前加载

否则会出现，界面渲染了，但是主题没读取出来，造成主题先显示默认颜色，才显示我们设置的主题颜色

那么flutter项目的main.dart中有一段代码

return runApp(MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (context) => UserProvider()),
            ChangeNotifierProvider(create: (context) => ThemeProvider()),
          ],
          child: MyApp(),
        ));

可以看到 child: MyApp() 之前是没有ui渲染操作的，所以我们要在 return runApp之前读取到主题，并且生成ThemeProvider对象，代码改动如下

int theme;//添加一个变量，接收数据库读取返回

void main() async {//由于读取数据库需要异步，所以加上async
  await loadData();//读取数据库保存的主题
      ThemeProvider themeProvider = ThemeProvider();//new一个主题状态对象
      themeProvider.setTheme(theme ?? 0);//给对象设置成我们读取的主题
      return runFxApp(
        MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (context) => UserProvider()),
            ChangeNotifierProvider(create: (context) => themeProvider),//这里ThemeProvider()  改成 themeProvider对象
          ],
          child: MyApp(),
        ),
        // onEnsureInitialized: (info) {},
        enableLog: false,
        uiBlueprints: uiSize,
      );
}

void loadData() async {
  SharedPreferences sp = await SharedPreferences.getInstance();
  theme = sp.getInt("theme") ?? 0;//如果读取是空则返回0
}

经过以上改动，我们完成了读取持久化保存的主题，并且在app启动时预先加载了主题

实现效果演示

s103xavuim.gif