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视图> < ...
随机推荐
- docker 搭建私有仓库 harbor
前提 已安装好 docker 和 docker-compose 环境:CentOS Linux release 7.5 docker 版本:18.09.05 1.安装harbor wget -P / ...
- DateTimeHelper【日期类型与字符串互转以及日期对比相关操作】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 实现日期和字符串之间的转换以及日期的相关操作: 1.日期格式的字符串输出为Date类型: 2.将Date类型以指定格式输出: 3.将 ...
- js简单四则运算
作业来源 本次作业要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 我的项目GitHub远程仓库地址:https:/ ...
- 当代前端应该怎么写这个hello world?
前言 大概16年的时候我们队react进行了简单的学习:从DOM操作看Vue&React的前端组件化,顺带补齐React的demo,当时我们只是站在框架角度在学习,随着近几年前端的变化,想写个 ...
- golang命令行库cobra的使用
简介 Cobra既是一个用来创建强大的现代CLI命令行的golang库,也是一个生成程序应用和命令行文件的程序.下面是Cobra使用的一个演示: Cobra提供的功能 简易的子命令行模式,如 app ...
- Netflix网关zuul(1.x和2.x)全解析
zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul可以通过加载动态过滤机制,从而实现以下各项功能: 验证与安全保障: 识别面向各类 ...
- Mondrian + JPivot 环境配置
一.环境准备 特别说明:Mondrian + JPivot 环境笔者已整理调试通过,可直接部署运行. 1.1 环境要求 JDK1.8+ 1.2 环境包说明 从 https://pan.baidu.co ...
- 原生js轮盘抽奖实例分析(幸运大转盘抽奖)
效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...
- C# 把字符串类型日期转换为日期类型(转载)
C# 把字符串类型日期转换为日期类型 来源:https://www.cnblogs.com/raincedar/p/7009243.html 方法一:Convert.ToDateTime(stri ...
- 简说Java线程的那几个启动方式
本文首发于本博客 猫叔的博客,转载请申明出处 前言 并发是一件很美妙的事情,线程的调度与使用会让你除了业务代码外,有新的世界观,无论你是否参与但是这对于你未来的成长帮助很大. 所以,让我们来好好看看在 ...