一、Flutter 应用主题

Flutter 应用主题都封装在 ThemeData 类中 , 在 MaterialApp 的 theme 字段 , 可以设置 ThemeData 主题 , 可设置的选项如下 , 下面的 ThemeData 工厂构造函数中的可选参数就是可以设置的各种主题选项 ;

class ThemeData extends Diagnosticable {factory 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 focusColor,Color hoverColor,Color highlightColor,Color splashColor,InteractiveInkFeatureFactory splashFactory,Color selectedRowColor,Color unselectedWidgetColor,Color disabledColor,Color buttonColor,ButtonThemeData buttonTheme,ToggleButtonsThemeData toggleButtonsTheme,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,TooltipThemeData tooltipTheme,CardTheme cardTheme,ChipThemeData chipTheme,TargetPlatform platform,MaterialTapTargetSize materialTapTargetSize,bool applyElevationOverlayColor,PageTransitionsTheme pageTransitionsTheme,AppBarTheme appBarTheme,BottomAppBarTheme bottomAppBarTheme,ColorScheme colorScheme,DialogTheme dialogTheme,FloatingActionButtonThemeData floatingActionButtonTheme,Typography typography,CupertinoThemeData cupertinoOverrideTheme,SnackBarThemeData snackBarTheme,BottomSheetThemeData bottomSheetTheme,PopupMenuThemeData popupMenuTheme,MaterialBannerThemeData bannerTheme,DividerThemeData dividerTheme,ButtonBarThemeData buttonBarTheme,})
}

如下代码中就设置了 MaterialApp 的主题 ThemeData , brightness 字段设置的是主题模式 , 这里设置的是 Brightness.light 日间模式 ;

primarySwatch 字段设置的是主题的主要颜色 , 这里设置的是蓝色 ;

import 'package:flutter/material.dart';class ThemePage extends StatefulWidget {@override_ThemePageState createState() => _ThemePageState();
}class _ThemePageState extends State<ThemePage> {@overrideWidget build(BuildContext context) {return MaterialApp(title: "Theme 主题修改",theme: ThemeData(brightness: Brightness.light,primarySwatch: Colors.blue,),home: ,);}
}

二、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';class ThemePage extends StatefulWidget {@override_ThemePageState createState() => _ThemePageState();
}class _ThemePageState extends State<ThemePage> {/// 主题模式Brightness brightness = Brightness.light;@overrideWidget build(BuildContext context) {return MaterialApp(title: "Theme 主题修改",theme: ThemeData(brightness: brightness,primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text("Theme 主题修改"),),body: Column(children: <Widget>[RaisedButton(onPressed: (){setState(() {brightness = Brightness.light;});},child: Text("切换到日间主题"),),RaisedButton(onPressed: (){setState(() {brightness = Brightness.dark;});},child: Text("切换到夜间主题"),),],),),);}
}

运行效果 :

三、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15547438 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )相关推荐

asp.net运行时动态修改主题
对自己已知的实现asp.net动态修改主题的方式做一个小总结方式一: 在页面的PreInit事件中直接设置.该方法可实现不同页面加载不同主题,如果要实现网站整体换肤,只需要创建一个从System.W ...
Highcharts 动态修改主题
Highcharts 动态修改主题在higncharts的主题教程中主题是通过src的方式来配置的,也就是在绘制前,主题已经确定了,如果我想动态修改主题该如何操作呢? 官方貌似并没有提供切换主题的a ...
uniapp 微信小程序配置全局主题色、实现动态修改主题色
前言: 本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调.第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色:第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色 ...
uniapp之微信小程序开发——根据主题色动态修改svg的颜色
文章目录小程序引用图片的几种方式小程序如何引用svg图片? 小程序根据主题色,动态修改svg颜色总结及注意点小程序引用图片的几种方式这一期我们直入主题,教大家如何动态改变图标的颜色. 首先, ...
android 动态更改主题,Android应用动态修改主题的方法示例
1.使用API设置主题如下所示,在Activity中使用setTheme setTheme(R.style.MyTheme1); 2.调用API的时机需要在super.onCreate(saved ...
【Vue 开发实战】实战篇 # 42：如何定制主题及动态切换主题
说明 [Vue 开发实战]学习笔记. vuecli3 配置 module.exports = {css: {loaderOptions: {less: {modifyVars: {'primary-c ...
element如何动态切换主题(vite+vue+ts+elementPlus)
前言提示:动态切换主题使用的是css3的var函数现实示例:切换--main-bg-color的值,使用<div style="--main-bg-color:red"& ...
ECharts实现动态切换主题样式
ECharts是百度开源的一个JS数据可视化库.通过颜色主题可以轻松实现不同颜色样式的修改,也可以通过调色盘.直接样式设置.高亮样式等方法实现. ECharts4 开始,除了一贯的默认主题外,新内置了 ...
ant-design-vue antd-theme-webpack-plugin 动态改变主题
安装 npm install -D antd-theme-webpack-plugin 关键源码构造器选项: const defaulOptions = {varFile: path.join(__ ...

【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )

文章目录

一、Flutter 应用主题

二、完整代码示例

三、相关资源

【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )相关推荐

最新文章

热门文章