Flutter以两种方式实现App主题切换的代码

概述

app主题切换已经成为了一种流行的用户体验，丰富了应用整体ui视觉效果。例如，白天夜间模式切换。实现该功能的思想其实不难，就是将涉及主题的资源文件进行全局替换更新。说到这里，我想你肯定能联想到一种设计模式：观察者模式。多种观察对象（主题资源）来观察当前主题更新的行为（被观察对象），进行主题的更新。今天和大家分享在 flutter 平台上如何实现主题更换。

效果

实现流程

在 flutter 项目中，materialapp组件为开发者提供了设置主题的api：

 const materialapp({
 ...
 this.theme, // 主题
 ...
 })

通过 theme 属性，我们可以设置在materialapp下的主题样式。theme 是 themedata 的对象实例：

themedata({
 
 brightness brightness,
 materialcolor primaryswatch,
 color primarycolor,
 brightness primarycolorbrightness,
 color primarycolorlight,
 color primarycolordark,
 
 ...
 
 })

themedata 中包含了很多主题设置，我们可以选择性的改变其中的颜色，字体等等。所以我们可以通过改变 primarycolor 来实现状态栏的颜色改变。并通过theme来获取当前 primarycolor 颜色值，将其赋值到其他组件上即可。在触发主题更新行为时，通知 themedata 的 primarycolor改变行对应颜色值。 有了以上思路，接下来我们通过两种方式来展示如何实现主题的全局更新。

主题选项

在实例中我们以一下主题颜色为主：

/**
 * 主题选项
 */
import 'package:flutter/material.dart';
 
final list<color> themelist = [
 colors.black,
 colors.red,
 colors.teal,
 colors.pink,
 colors.amber,
 colors.orange,
 colors.green,
 colors.blue,
 colors.lightblue,
 colors.purple,
 colors.deeppurple,
 colors.indigo,
 colors.cyan,
 colors.brown,
 colors.grey,
 colors.bluegrey
];

eventbus 方式实现

flutter中eventbus提供了事件总线的功能，以监听通知的方式进行主体间通信。我们可以在main.dart入口文件下注册主题修改的监听，通过eventbus发送通知来动态修改 theme。核心代码如下：

 @override
 void initstate() {
 super.initstate();
 application.eventbus = new eventbus();
 themecolor = themelist[widget.themeindex];
 this.registerthemeevent();
 }
 
 /**
 * 注册主题切换监听
 */
 void registerthemeevent() {
 application.eventbus.on<themechangeevent>().listen((themechangeevent ondata)=> this.changetheme(ondata));
 }
 
 /**
 * 刷新主题样式
 */
 void changetheme(themechangeevent ondata) {
 setstate(() {
  themecolor = themelist[ondata.themeindex];
 });
 }
 
 @override
 widget build(buildcontext context) {
 return materialapp(
  theme: themedata(
  primarycolor: themecolor
  ),
  home: homepage(),
 );
 }

然后在更新主题行为的地方来发送通知刷新即可：

 changetheme() async {
 application.eventbus.fire(new themechangeevent(1));
 }

scoped_model 状态管理方式实现

了解 react、 react naitve 开发的朋友对状态管理框架肯定都不陌生，例如 redux 、mobx、 flux 等等。状态框架的实现可以帮助我们非常轻松的控制项目中的状态逻辑，使得代码逻辑清晰易维护。flutter 借鉴了 react 的状态控制，同样产生了一些状态管理框架，例如 flutter_redux、scoped_model、bloc。接下来我们使用 scoped_model 的方式实现主题的切换。 关于 scoped_model 的使用方式可以参考pub仓库提供的文档：

1. 首先定义主题 model

/**
 * 主题model
 * create by songlcy
 */
import 'package:scoped_model/scoped_model.dart';
 
abstract class themestatemodel extends model {
 
 int _themeindex;
 get themeindex => _themeindex;
 
 void changetheme(int themeindex) async {
 _themeindex = themeindex;
 notifylisteners();
 }
}

 在 themestatemodel 中，定义了对应的主题下标，changetheme() 方法为更改主题，并调用 notifylisteners() 进行全局通知。

2. 注入model

 @override
 widget build(buildcontext context) {
 return scopedmodel<mainstatemodel>(
  model: mainstatemodel(),
  child: scopedmodeldescendant<mainstatemodel>(
  builder: (context, child, model) {
   return materialapp(
   theme: themedata(
    primarycolor: themelist[model.themeindex]
   ),
   home: homepage(),
   );
  },
  )
 );
 }

3. 修改主题

 changetheme(int index) async {
 int themeindex = index;
 mainstatemodel().of(context).changetheme(themeindex);
 }

可以看到，使用 scoped_model 的方式同样比较简单，思路和 eventbus 类似。以上代码我们实现了主题的切换，细心的朋友可以发现，我们还需要对主题进行保存，当下次启动 app 时，要显示上次切换的主题。flutter中提供了 shared_preferences 来实现本地持久化存储。

主题持久化保存

当进行主题更换时，我们可以对主题进行持久化本地存储

 void changetheme(int themeindex) async {
 _themeindex = themeindex;
 sharedpreferences sp = await sharedpreferences.getinstance();
 sp.setint("themeindex", themeindex);
 }

然后在项目启动时，取出本地存储的主题下标，设置在theme上即可

void main() async {
 int themeindex = await gettheme();
 runapp(app(themeindex));
}
 
future<int> gettheme() async {
 sharedpreferences sp = await sharedpreferences.getinstance();
 int themeindex = sp.getint("themeindex");
 if(themeindex != null) {
 return themeindex;
 }
 return 0;
}
 
@override
widget build(buildcontext context) {
 return scopedmodel<mainstatemodel>(
  model: mainstatemodel,
  child: scopedmodeldescendant<mainstatemodel>(
  builder: (context, child, model) {
   return materialapp(
   theme: themedata(
    primarycolor: themelist[model.themeindex != null ? model.themeindex : widget.themeindex]
   ),
   home: homepage(),
   );
  },
  )
 );
}

以上我们通过两种方式来实现了主题的切换，实现思想都是通过通知的方式来触发组件 build 进行刷新。那么两种方式有什么区别呢？

区别

从 print log 中，可以发现，当使用 eventbus 事件总线进行切换主题刷新时，_appstate 下的 build方法 和 home指向的组件界面  整体都会重新构建。而使用scoped_model等状态管理工具，_appstate 下的 build方法不会重新执行，只会刷新使用到了model的组件，但是home对应的组件依然会重新执行build方法进行构建。所以我们可以得出以下结论：

两者方式都会导致 home 组件被重复 build。明显区别在于使用状态管理工具的方式可以避免父组件 build 重构。

源码已上传到 github，详细代码可以查看 

eventbus 实现整体代码：

import 'package:flutter/material.dart';
import 'package:event_bus/event_bus.dart';
import './config/application.dart';
import './pages/home_page.dart';
import './events/theme_event.dart';
import './constants/theme.dart';
import 'package:shared_preferences/shared_preferences.dart';
 
void main() async {
 int themeindex = await getdefaulttheme();
 runapp(app(themeindex));
}
 
future<int> getdefaulttheme() async {
 // 从shared_preferences中获取上次切换的主题
 sharedpreferences sp = await sharedpreferences.getinstance();
 int themeindex = sp.getint("themeindex");
 print(themeindex);
 if(themeindex != null) {
 return themeindex;
 }
 return 0;
}
 
class app extends statefulwidget {
 
 int themeindex;
 app(this.themeindex);
 
 @override
 state<statefulwidget> createstate() => appstate();
}
 
class appstate extends state<app> {
 
 color themecolor;
 
 @override
 void initstate() {
 super.initstate();
 application.eventbus = new eventbus();
 themecolor = themelist[widget.themeindex];
 this.registerthemeevent();
 }
 
 void registerthemeevent() {
 application.eventbus.on<themechangeevent>().listen((themechangeevent ondata)=> this.changetheme(ondata));
 }
 
 void changetheme(themechangeevent ondata) {
 setstate(() {
  themecolor = themelist[ondata.themeindex];
 });
 }
 
 @override
 widget build(buildcontext context) {
 return materialapp(
  theme: themedata(
  primarycolor: themecolor
  ),
  home: homepage(),
 );
 }
 
 @override
 void dispose() {
 super.dispose();
 application.eventbus.destroy();
 }
}
 changetheme() async {
 sharedpreferences sp = await sharedpreferences.getinstance();
 sp.setint("themeindex", 1);
 application.eventbus.fire(new themechangeevent(1));
 }

scoped_model 实现整体代码：

import 'package:flutter/material.dart';
import 'package:event_bus/event_bus.dart';
import 'package:scoped_model/scoped_model.dart';
import 'package:shared_preferences/shared_preferences.dart';
import './config/application.dart';
import './pages/home_page.dart';
import './constants/theme.dart';
import './models/state_model/main_model.dart';
void main() async {
 int themeindex = await gettheme();
 runapp(app(themeindex));
}
future<int> gettheme() async {
 sharedpreferences sp = await sharedpreferences.getinstance();
 int themeindex = sp.getint("themeindex");
 if(themeindex != null) {
 return themeindex;
 }
 return 0;
}
class app extends statefulwidget {
 final int themeindex;
 app(this.themeindex);
 @override
 _appstate createstate() => _appstate();
}
class _appstate extends state<app> {
 @override
 void initstate() {
 super.initstate();
 application.eventbus = new eventbus();
 }
 @override
 widget build(buildcontext context) {
 return scopedmodel<mainstatemodel>(
  model: mainstatemodel(),
  child: scopedmodeldescendant<mainstatemodel>(
  builder: (context, child, model) {
   return materialapp(
   theme: themedata(
    primarycolor: themelist[model.themeindex != null ? model.themeindex : widget.themeindex]
   ),
   home: homepage(),
   );
  },
  )
 );
 }
}
 changetheme() async {
 int themeindex = mainstatemodel().of(context).themeindex == 0 ? 1 : 0;
 sharedpreferences sp = await sharedpreferences.getinstance();
 sp.setint("themeindex", themeindex);
 mainstatemodel().of(context).changetheme(themeindex);
 }

总结