Flutter如何实现App主题切换

这篇文章主要讲解了Flutter如何实现App主题切换，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联建站主营平阴网站建设的网络公司,主营网站建设方案,app软件开发公司,平阴h5小程序开发搭建,平阴网站营销推广欢迎平阴等地区企业咨询

概述

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

效果

Flutter如何实现App主题切换

实现流程

在 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 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().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仓库提供的文档：https://pub.dartlang.org/packages/scoped_model

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(
  model: MainStateModel(),
  child: ScopedModelDescendant(
  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 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(
  model: mainStateModel,
  child: ScopedModelDescendant(
  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 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 createState() => AppState();
}
 
class AppState extends State {
 
 Color themeColor;
 
 @override
 void initState() {
 super.initState();
 Application.eventBus = new EventBus();
 themeColor = ThemeList[widget.themeIndex];
 this.registerThemeEvent();
 }
 
 void registerThemeEvent() {
 Application.eventBus.on().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 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 {
 @override
 void initState() {
 super.initState();
 Application.eventBus = new EventBus();
 }
 @override
 Widget build(BuildContext context) {
 return ScopedModel(
  model: MainStateModel(),
  child: ScopedModelDescendant(
  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);
 }

看完上述内容，是不是对Flutter如何实现App主题切换有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

文章题目：Flutter如何实现App主题切换
文章源于：http://chengdu.cdxwcx.cn/article/pessic.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

Flutter如何实现App主题切换

其他资讯

jquery面板拖动 jquery拖动div

html5定位教程 html5定位当前位置

html5插入style html5中style怎么用

html5签到设置 js签到

jquery单选树 jquery单选框

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

Flutter如何实现App主题切换

其他资讯

jquery面板拖动 jquery拖动div

html5定位教程 html5定位当前位置

html5插入style html5中style怎么用

html5签到设置 js签到

jquery单选树 jquery单选框

成都网站建设设计将想法与焦点和您一起共享