Flutter主题适配与自动切换暗色模式
更多文章可以访问我的博客Aengus | Blog
Flutter主题适配
Flutter一开始便对主题提供了较为完善的支持，使用ThemeData对主题进行了封装，当未显式设置Widget的样式时，Flutter会自动获取其父Widget的主题作为自己的样式，所以我们可以在程序入口也就是return MaterialApp()中指定自己的主题。
建议尽量少使用显式指定的方式设置Widget的样式，而是使用ThemeData的方式，这样无论是在后续的主题设置还是暗黑主题的切换都会减少大量重复的操作。下面以Allpass为例说一下我的主题适配方案。
Allpass使用Provider进行状态管理，所以主题同样使用Provider进行管理与切换，新建ThemeProvider类，其中管理当前正在使用的主题，在main()函数中对ThemeProvider进行初始化，并在切换主题时调用changeTheme()进行主题切换；程序支持多种颜色主题，这些主题除了主要的颜色不一样外，其他样式都一样，如果为每一种颜色都单独使用ThemeData进行封装会增加很多冗余代码，对于这种问题我的解决方案是增加一个defaultTheme(Color color)函数，此函数返回ThemeData，然后对每个主题都增加其对应的函数，在函数中调用defaultTheme()并将颜色传入，如下：
class ThemeProvide with ChangeNotifier {
AllpassTheme _allpassTheme; // 管理主题资源
ThemeData currentTheme;
init() {
_allpassTheme = AllpassTheme();
currentTheme = getTheme(Config.theme); // Config.theme保存之前设置的主题名
}
ThemeData getTheme(String themeName) {
// 根据String返回对应的主题，这里简单实现
return _allpassTheme.blueTheme();
}
void changeTheme(String themeName) {
currentTheme = getTheme(themeName);
notifyListeners();
}
}
void main() {
ThemeProvider theme = ThemeProvider()..init();
runApp(MultiProvider(
providers: [
ChangeNotifierProvider<ThemeProvider>.value(value: theme)
],
child: Allpass(),
));
}
// 程序入口
class Allpass extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Allpass',
theme: Provider.of<ThemeProvider>(context).currentTheme,
home: HomePage(),
);
}
}
class AllpassTheme {
ThemeData defaultTheme({Color color}) {
return ThemeData(/* 主题数据 */);
}
ThemeData blueTheme() {
return defaultTheme(color: Colors.blue);
}
}
由于暗色主题和普通主题样式差别较大，所以不能使用defaultTheme()的方式，只能使用新的ThemeData。
值得一提的是，ThemeData有个名为primarySwatch的命名参数，类型为MaterialColor，当未在ThemeData中对某些Widget设置样式时，Flutter会自动根据此参数为其设置样式，可以传入像Colors.blue,Color.red,Colors.green这类值。
自动切换暗色主题
Flutter对跟随系统切换主题的支持也较为完善。同样是在程序的入口，传入darkTheme参数后就可以自由切换主题，还可以传入themeMode设置为暗色模式（ThemeMode.dark），浅色模式（ThemeMode.light），跟随系统切换（默认，ThemeMode.system）。一旦为程序添加了自动切换暗色模式的功能，就要额外添加参数进行设置。同样以Allpass为例，代码变为：
class ThemeProvide with ChangeNotifier {
AllpassTheme _allpassTheme;
ThemeData lightTheme; // 浅色模式下的主题
ThemeData darkTheme; // 暗色模式下的主题
ThemeMode themeMode; // 主题模式
init() {
_allpassTheme = AllpassTheme();
lightTheme = getTheme(Config.lightTheme);
darkTheme = _allpassTheme.darkTheme();
themeMode = getThemeMode(Config.themeMode) // 根据用户之前的选择确定
}
void changeTheme(String themeName) {
if (themeName == "dark") {
themeMode = ThemeMode.dark;
} else if (themeName == "system") {
themeMode = ThemeMode.system;
} else {
themeMode = ThemeMode.light;
lightTheme = getTheme(themeName);
}
notifyListeners();
}
}
// 程序入口
class Allpass extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Allpass',
theme: Provider.of<ThemeProvider>(context).lightTheme,
darkTheme: Provider.of<ThemeProvider>(context).darkTheme,
themeMode: Provider.of<ThemeProvider>(context).themeMode,
home: HomePage(),
);
}
}
这样，当用户在主题选择页切换主题时，我们仍调用changeTheme()函数，但是函数中会增加对主题模式的设置，当用户选择“跟随系统”时，程序会自动在暗色模式与用户最后一次使用的浅色主题之间切换。
完善自动切换功能
Flutter虽然支持了主题的自动切换，但是我们可以看到只能切换Flutter已经封装好的ThemeData，如果我们有些页面的背景颜色和默认的不一样，而是使用自定义的颜色，而我们仍然需要跟随系统自动切换，这样如何实现自动切换呢？
Flutter提供了WidgetsBindingObserver抽象类，该类声明了和Widget绑定的方法，其中方法didChangePlatformBrightness()会在系统切换主题模式时会调用，所以我们可以将对自定义颜色的初始化设置在这个函数中；在Flutter app.dart的源码中，在637行我们可以看到Flutter如何实现的主题切换：
final ThemeMode mode = widget.themeMode ?? ThemeMode.system;
ThemeData theme;
if (widget.darkTheme != null) {
final ui.Brightness platformBrightness = MediaQuery.platformBrightnessOf(context);
if (mode == ThemeMode.dark ||
(mode == ThemeMode.system && platformBrightness == ui.Brightness.dark)) {
theme = widget.darkTheme;
}
}
theme ??= widget.theme ?? ThemeData.fallback();
我们可以使用MediaQuery.platformBrightnessOf(context)函数获取当前系统所处的主题，来确定自定义颜色的值。
同样是在ThemeProvider中，修改代码如下：
class ThemeProvide with ChangeNotifier {
AllpassTheme _allpassTheme;
ThemeData lightTheme; // 浅色模式下的主题
ThemeData darkTheme; // 暗色模式下的主题
ThemeMode themeMode; // 主题模式
Color extraColor;
init() {
_allpassTheme = AllpassTheme();
lightTheme = getTheme(Config.lightTheme);
darkTheme = _allpassTheme.darkTheme();
themeMode = getThemeMode(Config.themeMode) // 根据用户之前的选择确定
}
void changeTheme(String themeName, {BuildContext context}) {
if (themeName == "dark") {
themeMode = ThemeMode.dark;
} else if (themeName == "system") {
themeMode = ThemeMode.system;
} else {
themeMode = ThemeMode.light;
lightTheme = getTheme(themeName);
}
setExtraColor(context);
}
void setExtraColor(BuildContext context, {bool needReverse = false}) {
if (themeMode == ThemeMode.system) {
_setExtraColorAuto(context, reverse: needReverse);
} else if (themeMode == ThemeMode.dark) {
_setExtraColorDarkMode(); // 此函数实现省略
} else {
_setExtraColorLightMode(); // 此函数实现省略
}
notifyListeners(); // 由于setExtraColor调用的地方更多，所以将此函数放在setExtraColor中
}
void _setExtraColorAuto(BuildContext context, {bool reverse = false}) {
Brightness reference = Brightness.dark;
if (reverse) {
reference = Brightness.light;
}
if (MediaQuery.platformBrightnessOf(context) == reference) {
_setExtraColorDarkMode();
} else {
_setExtraColorLightMode();
}
}
}
有细心的读者可能发现上面多了一个needReverse参数，这个参数的作用在后面解释。
在程序的首页或者主页中，我们对其做如下改动：
class _HomePage extends State<HomePage> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
Provider.of<ThemeProvider>(context).setExtraColor(context: context);
});
}
@override
void didChangePlatformBrightness() {
super.didChangePlatformBrightness();
Provider.of<ThemeProvider>(context).setExtraColor(context: context, needReverse: true);
}
}
needReverse参数在didChangePlatformBrightness()中使用，如果没有此参数，会出现系统切换到暗色（浅色）模式时程序错误的将自定义颜色设置成了浅色（暗色）模式下的值。猜测原因可能是系统切换时MediaQuery.platformBrightnessOf(context)函数结果未及时更新的缘故。
如此，我们便实现了跟随系统自动切换自定义颜色主题的需求。
在本文中为了方便省略了大量代码，如果有需要可以查看Allpass的源码。
