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视图> < ...
随机推荐
- 【Android Studio安装部署系列】三、Android Studio项目目录结构
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 简单介绍下Android studio新建项目的目录结构. 常用项目结构类型 在Android Studio中,提供了以下几种项目结 ...
- UmengAppDemo【友盟统计SDK集成以及多渠道打包配置,基于V7.5.3版本】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 这里只是记录下集成友盟统计SDK以及简单配置多渠道打包的步骤.所以1.该Demo不能运行:2.配置多渠道打包只是一种简单的写法,具体 ...
- .net core下简单构建高可用服务集群
一说到集群服务相信对普通开发者来说肯定想到很复杂的事情,如zeekeeper ,反向代理服务网关等一系列的搭建和配置等等:总得来说需要有一定经验和规划的团队才能应用起来.在这文章里你能看到在.net ...
- 痞子衡嵌入式:开启NXP-MCUBootUtility工具的HAB加密功能 - CST(中英双语)
1 Reason for enabling HAB encryption function 为什么要开启HAB加密功能 NXP-MCUBootUtility is a tool designed fo ...
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- Java 设置PDF文档背景色
一般生成的PDF文档默认的文档底色为白色,我们可以通过一定方法来更改文档的背景色,以达到文档美化以及保护双眼的作用. 以下内容提供了Java编程来设置PDF背景色的方法.包括: 设置纯色背景色 设置图 ...
- 编程心法 之 Scrum - Agile 敏捷开发
Scrum是一种敏捷开发的方法 先定一个能达到的小目标 Scrum 团队 包括产品负责人.开发团队和Scrum Master Product Owner 产品负责人:管理代办事项和优先级的唯一负责人. ...
- Hacking Bsides Vancouver 2018 walkthrough
概述: Name: BSides Vancouver: 2018 (Workshop) Date release: 21 Mar 2018 Author: abatchy Series: BSides ...
- Windows有点腻了?不如试试Ubuntu.
最近在接触Python. 因为担心环境会向Java一样,很容易影响当前的工作电脑. 所以准备搭建一台虚拟机,不过Windows的尺寸是在太大了.所以,选择安装Ubuntu. Ubuntu官方网站地址: ...
- 看完我身边前卫时尚女孩的手机 这几款APP强烈推荐
爱美之心,人皆有之,爱美是所有人生追求里最有价值的生活状态,美是一种能力,更是一种修养,懂得打扮自己的女人更受欢迎 因为她们懂得什么是美.想要变美的女孩们不要着急,下面几款爱美工具定会让你一见钟情. ...