flutter 主题切换
### 主题
```
// 1.main主文件
import 'package:flutter_smart_park/config/theme.dart' show AppTheme; Provide.value<ConfigModel>(context).$getTheme(); Provide<ConfigModel>(
builder: (context, child, configModel) {
return MaterialApp(
title: '智慧xx区',
debugShowCheckedModeBanner: false,
onGenerateRoute: Routes.router.generator,
theme: AppTheme.getThemeData(configModel.theme),
home: WillPopScope(
onWillPop: () async {
timerCountDown = TimerUtil(mInterval: 1000, mTotalTime: 1 * 1000);
timerCountDown.setOnTimerTickCallback((int value) {
if (value == 0) {
AndroidBackTop.cancelBackDeskTop();
}
});
timerCountDown.startCountDown();
AndroidBackTop.backDeskTop();
return false;
},
child: Pages(),
),
);
},
);
// 2.theme 主题文件
import 'package:flutter/material.dart'; Map materialColor = {
'purple': {
"primaryColor": 0xFF7B1FA2,
"primaryColorLight": 0xFF9C27B0,
},
'pink':{
"primaryColor": 0xFFc2185b,
"primaryColorLight": 0xFFd81b60,
},
'deeppink':{
"primaryColor": 0xFFf50057,
"primaryColorLight": 0xFFe91e63,
},
'blue':{
"primaryColor": 0xFF1976D2,
"primaryColorLight": 0xFF2196F3,
},
}; class AppTheme {
static Map mainColor = materialColor['purple'];
static getThemeData(String theme) {
mainColor = materialColor[theme];
ThemeData themData = ThemeData(
// scaffoldBackgroundColor: Colors.red, // 页面的背景颜色 primaryColor: Color(mainColor["primaryColor"]), // 主颜色
primaryColorLight: Color(mainColor["primaryColorLight"]),
// 按钮颜色
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
buttonColor: Color(mainColor["primaryColor"]),
), // appbar样式
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(color: Colors.white),
textTheme: TextTheme(
title: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
), // 图标样式
iconTheme: IconThemeData(
color: Color(mainColor["primaryColor"]),
),
);
return themData;
}
} // 3.provide 状态管理文件
import 'package:flutter_smart_park/untils/local_storage.dart';
class ConfigInfo {
String theme = 'purple'; // 默认主题颜色
} class ConfigModel extends ConfigInfo with ChangeNotifier { // 将主题颜色保存至本地存储,持久化
Future $getTheme() async {
String _theme = await LocalStorage.get('theme');
if (_theme != null) {
$setTheme(_theme);
}
} Future $setTheme(payload) async {
theme = payload;
LocalStorage.set('theme', payload);
notifyListeners();
}
}
// 4.local_storage文件
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart'; class LocalStorage {
static Future get(String key) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getString(key);
} static Future set(String key, String value) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString(key, value);
} static Future setJSON(String key, value) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
value = json.encode(value);
prefs.setString(key, value);
} static Future remove(String key) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.remove(key);
}
} // 使用
Theme.of(context).primaryColor, ``` ```
(new) ThemeData({Brightness brightness, MaterialColor primarySwatch, Color primaryColor, Brightness primaryColorBrightness, Color primaryColorLight, Color primaryColorDark, Color accentColor, Brightness accentColorBrightness, Color canvasColor, Color scaffoldBackgroundColor, Color bottomAppBarColor, Color cardColor, Color dividerColor, Color highlightColor, Color splashColor, InteractiveInkFeatureFactory splashFactory, Color selectedRowColor, Color unselectedWidgetColor, Color disabledColor, Color buttonColor, ButtonThemeData buttonTheme, Color secondaryHeaderColor, Color textSelectionColor, Color cursorColor, Color textSelectionHandleColor, Color backgroundColor, Color dialogBackgroundColor, Color indicatorColor, Color hintColor, Color errorColor, Color toggleableActiveColor, String fontFamily, TextTheme textTheme, TextTheme primaryTextTheme, TextTheme accentTextTheme, InputDecorationTheme inputDecorationTheme, IconThemeData iconTheme, IconThemeData primaryIconTheme, IconThemeData accentIconTheme, SliderThemeData sliderTheme, TabBarTheme tabBarTheme, CardTheme cardTheme, ChipThemeData chipTheme, TargetPlatform platform, MaterialTapTargetSize materialTapTargetSize, PageTransitionsTheme pageTransitionsTheme, AppBarTheme appBarTheme, BottomAppBarTheme bottomAppBarTheme, ColorScheme colorScheme, DialogTheme dialogTheme, Typography typography, CupertinoThemeData cupertinoOverrideTheme}) → ThemeData
package:flutter Create a [ThemeData] given a set of preferred values. Default values will be derived for arguments that are omitted. The most useful values to give are, in order of importance: The desired theme [brightness]. The primary color palette (the [primarySwatch]), chosen from one of the swatches defined by the material design spec. This should be one of the maps from the [Colors] class that do not have "accent" in their name. The [accentColor], sometimes called the secondary color, and, if the accent color is specified, its brightness ([accentColorBrightness]), so that the right contrasting text color will be used over the accent color. See https://material.io/design/color/ for more discussion on how to pick the right colors. ``` ```
(new) ButtonThemeData({ButtonTextTheme textTheme: ButtonTextTheme.normal, double minWidth: 88.0, double height: 36.0, EdgeInsetsGeometry padding, ShapeBorder shape, ButtonBarLayoutBehavior layoutBehavior: ButtonBarLayoutBehavior.padded, bool alignedDropdown: false, Color buttonColor, Color disabledColor, Color highlightColor, Color splashColor, ColorScheme colorScheme, MaterialTapTargetSize materialTapTargetSize}) → ButtonThemeData
package:flutter Create a button theme object that can be used with [ButtonTheme] or [ThemeData]. The [textTheme], [minWidth], [height], [alignedDropDown], and [layoutBehavior] parameters must not be null. The [minWidth] and [height] parameters must greater than or equal to zero. The ButtonTheme's methods that have a [MaterialButton] parameter and have a name with a get prefix are used by [RaisedButton], [OutlineButton], and [FlatButton] to configure a [RawMaterialButton]. ```
flutter 主题切换的更多相关文章
- 基于 Flutter 以两种方式实现App主题切换
概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...
- Android 主题切换 小结
前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...
- windows phone主题切换(换肤)
之前项目做了个主题切换的功能,最后客户没来得及出第二套界面给放弃了,默哀中... 为了不让它就这样流产了,就放博客共享吧. 首先说明下原理:这个切换是通过重写资源字典里指定的样式,在运行的过程中加载指 ...
- Android主题切换方案总结
所谓的主题切换,就是能够根据不同的设定,呈现不同风格的界面给用户,也就是所谓的换肤. 1.将主题包(图片与配置)存到SD卡上(可通过下载或手动放入指定目录),在代码里强制从本地文件创建图片与配置文字大 ...
- extjs folder is lost解决方法 和 FineUI主题切换时 iframe内的内容主题不变的解决方法
错误原因:extjs包和FineUI版本不一致 或者是 webconfig配置中 没有设置为任何人可访问 解放方法下载和FineUI版本相同的extjs包就ok了 解决方法:FineUI主题切换时 ...
- iOS开发之App主题切换完整解决方案(Swift版)
本篇博客就来介绍一下iOS App中主题切换的常规做法,当然本篇博客中只是提到了一种主题切换的方法,当然还有其他方法,在此就不做过多赘述了.本篇博客中所涉及的Demo完全使用Swift3.0编写完成, ...
- CI框架主题切换的功能
CI框架主题切换的功能 本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量 如 : ...
- Android主题切换—夜间/白天模式探究
现在市面上众多阅读类App都提供了两种主题:白天or夜间. 上述两幅图片,正是两款App的夜间模式效果,所以,依据这个功能,来看看切换主题到底是怎么实现的(当然现在github有好多PluginThe ...
- ASP.NET Core 中的SEO优化(4):自定义视图路径及主题切换
系列回顾 <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图> < ...
随机推荐
- ES 05 - 通过Kibana管理Elasticsearch集群服务
目录 1 检查集群的健康状况 2 查看集群中的节点个数 3 查看集群中的索引 4 简单的索引操作 4.1 创建索引 4.2 删除索引 在本篇文章之前, 需要完成: ① 启动Elasticsearch服 ...
- rabbitmq实现延时队列(死信队列)
基于队列和基于消息的TTL TTL是time to live 的简称,顾名思义指的是消息的存活时间.rabbitMq可以从两种维度设置消息过期时间,分别是队列和消息本身. 队列消息过期时间-Per-Q ...
- 阿里 Java 手册系列教程:为啥强制子类、父类变量名不同?
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 目录 父子类变量名相同会咋样? 为啥强制子类.父类变量名不同? ...
- 基于Log4Net本地日志服务简单实现
背景 项目开发中,我们或多或少会使用诸如NLog,Log4Net,Kafka+ELK等等日志套件: 基于关注点分离原则,业务开发的时候不应该关注日志具体实现:并且后续能方便切换其他日志套件: 这里先实 ...
- springcloud情操陶冶-bootstrapContext(一)
基于前文对springcloud的引导,本文则从源码角度查阅下cloud的context板块的运行逻辑 前言 springcloud是基于springboot开发的,所以读者在阅读此文前最好已经了解了 ...
- Python generator和yield介绍
Python生成器(generator)并不是一个晦涩难懂的概念.相比于MetaClass和Closure等概念,其较为容易理解和掌握.但相对于程序结构:顺序.循环和分支而言其又不是特别的直观.无论学 ...
- 【春华秋实】深入源码理解.NET Core中Startup的注册及运行
写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程序的起点.通过使用Startup,可以配置化处理所有向应用程序所做的请求的 ...
- 说说我为什么看好Spring Cloud Alibaba
最近对<Spring Cloud Alibaba基础教程>系列的催更比较多,说一下最近的近况:因为打算Spring Boot 2.x一起更新.所以一直在改博客Spring Boot专题页和 ...
- .net core api +swagger(一个简单的入门demo 使用codefirst+mysql)
前言: 自从.net core问世之后,就一直想了解.但是由于比较懒惰只是断断续续了解一点.近段时间工作不是太忙碌,所以偷闲写下自己学习过程.慢慢了解.net core 等这些基础方面学会之后再用.n ...
- 【转】解决未能加载文件或程序集'WebGrease‘的问题
在多个视图中,如果有使用共用的样式代码,可以把它们移至CSS文件中去.今天Insus.NET就举例一个例子来说明. 比如前2篇中<ASP.NET MVC图片管理(上传,预览与显示)>htt ...