Flutter 主题(皮肤)更换的那些事
Flutter的主题更换方式,是我所预料不到的。
Flutter更换主题,可以统一更换。
Flutter UI与原生的Android APP不同,Flutter UI默认就是Material Design
风格,而原生的Android APP有多种UI,开发者开发过程中如果不小心使用不同UI框架的UI,在修改主题这一需求的道路上便会难走许多。
开始
使用到的第三方库:
shared_preferences: ^2.0.7 # 本地存储 -- 实现主题持久化
provider: ^6.0.1 # 对InheritedWidget进行包装,使其更易于使用和重用。
shared_preferences
:类似原生Android开发的SharedPreferences
,作用都是本地存储,用法也基本一致,只是Flutter的shared_preferences
需要通过异步关键字async
才能调用。具体可见:shared_preferences
provider
:goole官方推荐的状态管理器,具体可见:provider
主题设置
在主题设置开始之前,需要先写一个with ChangeNotifier
的dart
文件,我们需要使用ChangeNotifier
通知页面的主题已发生变化,需要去更新界面
class AppTheme with ChangeNotifier {ThemeData theme;static String black = "black",blue = "blue",red = "red",yellow = "yellow",white = "white";setTheme(String themeStr) {if (themeStr != "" && themeStr != null) {if (themeStr == black) {theme = themeBlack;} else if (themeStr == blue) {theme = themeBlue;} else if (themeStr == red) {theme = themeRed;} else if (themeStr == yellow) {theme = themeYellow;} else if (themeStr == white) {theme = themeWhite;}} else {theme = themeWhite;}notifyListeners();}getTheme() {return theme == null ? themeWhite : theme;}
}
在需要修改主题的界面加上
@overrideWidget build(BuildContext context) {return MultiProvider(providers: [ChangeNotifierProvider(create: (_) => AppTheme())],child: Consumer<AppTheme>(builder: (context, appTheme, _) {return MaterialAppTheme();}));}
代码中的MaterialApp()
即是自己编写的界面样式,MaterialApp
提供了theme
属性,这一属性,便是控制整个APP主题样式的地方。
Widget MaterialAppTheme() {return MaterialApp(title: 'First Flutter Project',theme: 设置的主题,home: Scaffold(appBar: AppBar(title: Text("首页"),),body: Container(child: ListView.builder(itemCount: item.length,itemBuilder: (context, index) {String text = item[index]["text"];return InkWell(onTap: () {// 列表点击事件clickListItem(context, index);},child: ListTile(title: Text(text,),trailing: Icon(Icons.chevron_right),),);},),),),);
}void clickListItem(BuildContext context, int index) {if (index == 0) {showSystemThemeDialog(context);} else if (index == 1) {showCustomThemeDialog(context);} else if (index == 2) {Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()));}
}
点击列表之时,弹出一个框选择主题的颜色。
void showSystemThemeDialog(BuildContext context) {showDialog(context: context,builder: (context) {return SimpleDialog(title: Text("选择自定义主题"),children: [SimpleDialogOption(child: Container(child: Text(""),color: Colors.blue,height: SimpleDialogOptionHeight,),onPressed: () => selectTheme(context, AppTheme.blue),),SimpleDialogOption(child: Container(child: Text(""),color: Colors.red,height: SimpleDialogOptionHeight,),onPressed: () => selectTheme(context, AppTheme.red),),SimpleDialogOption(child: Container(child: Text(""),color: Colors.yellow,height: SimpleDialogOptionHeight,),onPressed: () => selectTheme(context, AppTheme.yellow),),],);},);
}void showCustomThemeDialog(BuildContext context) {showDialog(context: context,builder: (context) {return SimpleDialog(title: Text("选择系统主题"),children: [SimpleDialogOption(child: Container(child: Text(""),color: Colors.white,height: SimpleDialogOptionHeight,),onPressed: () => selectTheme(context, AppTheme.white),),SimpleDialogOption(child: Container(child: Text(""),color: Colors.black,height: SimpleDialogOptionHeight,),onPressed: () => selectTheme(context, AppTheme.black),),],);},);
}
系统主题
在Flutter中,有两种皮肤,即Brightness.dark
与Brightness.light
,我们所看到的默认使用的是Brightness.light
,如果想换成Brightness.dark
风格,在MaterialApp
的theme
设置ThemeData(brightness: Brightness.dark)
即可
自定义主题
自定义的主题设置起来比较麻烦,要设置的theme
属性,真滴是太多啦,点击查看自定义属性
主题持久化
主题持久化的实现,依靠的是shared_preferences
第三方库,在每次更换主题时修改掉本地储存的样式,启动APP再在渲染界面完成前取得上次APP关闭的颜色就好了
打开APP时提前设置主题theme
SharedPreferencesUtil.instance.getString("theme").then((value) => {this.appTheme.setTheme(value)});
在渲染MaterialApp
前,得到提前预设的主题,放上去就好
theme: this.appTheme.getTheme(),
ThemeData参数
factory ThemeData({Brightness brightness, // 应用整体主题的亮度。用于按钮之类的小部件,以确定在不使用主色或强调色时选择什么颜色。MaterialColor primarySwatch,// 定义一个单一的颜色以及十个色度的色块。Color primaryColor, // 应用程序主要部分的背景颜色(toolbars、tab bars 等)Brightness primaryColorBrightness, // primaryColor的亮度。用于确定文本的颜色和放置在主颜色之上的图标(例如工具栏文本)。Color primaryColorLight, // primaryColor的浅色版Color primaryColorDark, // primaryColor的深色版Color accentColor, // 小部件的前景色(旋钮、文本、覆盖边缘效果等)。Brightness accentColorBrightness, // accentColor的亮度。Color canvasColor, // MaterialType.canvas 的默认颜色Color scaffoldBackgroundColor, // Scaffold的默认颜色。典型Material应用程序或应用程序内页面的背景颜色。Color bottomAppBarColor, // BottomAppBar的默认颜色Color cardColor, // Card的颜色Color dividerColor, // Divider和PopupMenuDivider的颜色,也用于ListTile之间、DataTable的行之间等。Color highlightColor, // 选中在泼墨动画期间使用的突出显示颜色,或用于指示菜单中的项。Color splashColor, // 墨水飞溅的颜色。InkWellInteractiveInkFeatureFactory splashFactory, // 定义由InkWell和InkResponse反应产生的墨溅的外观。Color selectedRowColor, // 用于突出显示选定行的颜色。Color unselectedWidgetColor, // 用于处于非活动(但已启用)状态的小部件的颜色。例如,未选中的复选框。通常与accentColor形成对比。也看到disabledColor。Color disabledColor, // 禁用状态下部件的颜色,无论其当前状态如何。例如,一个禁用的复选框(可以选中或未选中)。Color buttonColor, // RaisedButton按钮中使用的Material 的默认填充颜色。ButtonThemeData buttonTheme, // 定义按钮部件的默认配置,如RaisedButton和FlatButton。Color secondaryHeaderColor, // 选定行时PaginatedDataTable标题的颜色。Color textSelectionColor, // 文本框中文本选择的颜色,如TextFieldColor cursorColor, // 文本框中光标的颜色,如TextFieldColor textSelectionHandleColor, // 用于调整当前选定的文本部分的句柄的颜色。Color backgroundColor, // 与主色形成对比的颜色,例如用作进度条的剩余部分。Color dialogBackgroundColor, // Dialog 元素的背景颜色Color indicatorColor, // 选项卡中选定的选项卡指示器的颜色。Color hintColor, // 用于提示文本或占位符文本的颜色,例如在TextField中。Color errorColor, // 用于输入验证错误的颜色,例如在TextField中Color toggleableActiveColor, // 用于突出显示Switch、Radio和Checkbox等可切换小部件的活动状态的颜色。String fontFamily, // 文本字体TextTheme textTheme, // 文本的颜色与卡片和画布的颜色形成对比。TextTheme primaryTextTheme, // 与primaryColor形成对比的文本主题TextTheme accentTextTheme, // 与accentColor形成对比的文本主题。InputDecorationTheme inputDecorationTheme, // 基于这个主题的 InputDecorator、TextField和TextFormField的默认InputDecoration值。IconThemeData iconTheme, // 与卡片和画布颜色形成对比的图标主题IconThemeData primaryIconTheme, // 与primaryColor形成对比的图标主题IconThemeData accentIconTheme, // 与accentColor形成对比的图标主题。SliderThemeData sliderTheme, // 用于呈现Slider的颜色和形状TabBarTheme tabBarTheme, // 用于自定义选项卡栏指示器的大小、形状和颜色的主题。CardTheme cardTheme, // Card的颜色和样式ChipThemeData chipTheme, // Chip的颜色和样式TargetPlatform platform, MaterialTapTargetSize materialTapTargetSize, // 配置某些Material部件的命中测试大小PageTransitionsTheme pageTransitionsTheme, AppBarTheme appBarTheme, // 用于自定义Appbar的颜色、高度、亮度、iconTheme和textTheme的主题。BottomAppBarTheme bottomAppBarTheme, // 自定义BottomAppBar的形状、高度和颜色的主题。ColorScheme colorScheme, // 拥有13种颜色,可用于配置大多数组件的颜色。DialogTheme dialogTheme, // 自定义Dialog的主题形状Typography typography, // 用于配置TextTheme、primaryTextTheme和accentTextTheme的颜色和几何TextTheme值。CupertinoThemeData cupertinoOverrideTheme
})
避坑指南:
1、热刷新无法更换修改后刷新的样式,往往都需要卸载APP,然后重新安装才能展示出效果
2、自定义appBarTheme,自定义的样式会覆盖掉原有的全部样式
本文代码链接:点击下载
Flutter 主题(皮肤)更换的那些事相关推荐
- 【Android Studio安装部署系列】八、Android Studio主题皮肤更换
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio具有自己的主题皮肤,但是如果想要更换自己喜欢的主题皮肤,可以参考下面的步骤. 注意,更换主题皮肤,之前的 ...
- uni-app框架开发App如何更换主题皮肤?
最近使用uni-app开发App,其中有个功能是可以一键切换App的主题皮肤.其中主题皮肤分为黑夜版和白天版.经过一番研究,终于大功告成,因此记录一下. 之前,在做web端进行更换皮肤的时候,是在页面 ...
- 傲游浏览器怎么更换皮肤 浏览器皮肤更换方法简述
再好看的浏览器皮肤,看得久了也会让人感觉无味.而在这个时候,不少人都会选择换种皮肤.换个心情!那么,傲游浏览器要怎么更换皮肤呢?下面小编就来简单介绍一下傲游浏览器皮肤更换的方法,不清楚具体方法的朋友可 ...
- 360浏览器如何进行皮肤更换
有很多用户在使用浏览器的时候都很喜欢使用各种有趣的皮肤,那么在使用浏览器的时候要如何更换浏览器的皮肤呢?今天就让我们一起来学习一下如何为360浏览器更换新的皮肤,让用户可以享受最便捷的线上操作,方便用 ...
- easyui html5主题,详解easyui 切换主题皮肤
1.需要导入的文件(我这里的easyui是jquery-easyui-1.6.11版本) 主要实现原理就是换导入css文件,这样就可以实现切换主题皮肤 2.前台页面定义了一个按钮(代码) 更换皮肤 d ...
- easyui 切换主题皮肤
jquery cookie下载地址::http://plugins.jquery.com/cookie/ 1.需要导入的文件(我这里的easyui是jquery-easyui-1.6.11版本) 主要 ...
- 快速安装Jupyter Notebook主题皮肤并设置教程
Jupyter Notebook的默认背景主题是白色,字体还不符合自己的眼光,看着实在费眼-也不够酷炫.我就不多赘述了,现在就来给我们的Jupyter notebook画一下妆,让它变得更加炫酷吧. ...
- 记录6年时间3套easyui前端框架主题皮肤美化的设计历程
沉寂了许久,是该发点东西了,要不然2023年都要过去一半了 ! 第一次接触Easyui前端框架,还是在2016年的时候,有个美化easyui界面的需求,自己是设计师,前端知识也只会最基本的html和c ...
- iOS App主题皮肤切换功能简介和具体实现详解 附有源码
分享一个朋友的人工智能教程.比较通俗易懂,风趣幽默,感兴趣的朋友可以去看看. 0.换肤的应用场景 一般情况下某些App在节假日(春节.中秋.国庆等)切换主题,显得更适合当下的气氛; 切换白天或夜晚模式 ...
- jqgrid按钮、主题皮肤和弹窗
最近学习jqgrid表格,想更换主题皮肤,但是网上找的很多更换主题的方法都没用,然后我之前无意中找到了一篇文章,上面给的链接下载的主题刚好我可以用.然后就想记录下来并分享! 首先先看代码: <! ...
最新文章
- 剑指offer:面试题14- I. 剪绳子
- 只调用一次_JavaScript运行机制 - 调用栈
- java代码调用python_Java调用Python
- 修改大型 XML 文件的有效方法
- 零基础自学java的难处_零基础自学Java 在学习中要注意哪些问题
- windows API 开发飞机订票系统 图形化界面 (二)
- python selenium 下拉列表_Selenium+Python之下拉菜单的定位
- 数据库连接html文件路径,Python+Flash+MySQL+HTML链接数据库查询,pythonflaskmysqlhtml,连库...
- python mysql创建表日期型_python 操作mysql,按照当前时间建立表,无法创建表..
- U盘恢复软件,U盘格式化后怎么恢复数据
- Leetcode 每日一题——845. 数组中的最长山脉
- 用JQuery实现简单计时答题游戏
- 冒泡法排序(从小到大)
- Webpack4+Babel7+ES6兼容IE8
- WVS使用教程(Web Vulnerability Scanner)
- 自闭症青年的突显网络、默认模式网络和中央执行网络功能连接的差异
- Java算法--第二章--查找与排序(2)递归基础--佩波那契最大公约数插入排序汉诺塔
- matlab中eacf函数,基于MATLAB的切比雪夫I型模拟低通滤波器设计
- ip地址的分类和特殊的网络地址-——计算机网络笔记
- 核心微生物分析_微生物多样研究—微生物深度分析概述