1. Theme主题的使用

Theme分为：全局Theme和局部Theme

主题有两个作用：

设置了主题之后，某些Widget会自动使用主题的样式（比如AppBar的颜色）
将某些样式放到主题中统一管理，在应用程序的其它地方直接引用

1.1 全局Theme

全局Theme会影响整个app的颜色和字体样式。

使用起来非常简单，只需要想MaterialApp构造器中传入ThemeData即可

如果没有设置Theme，Flutter将会使用预设的样式。
当然我们可以对它进行定制

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(title: "Flutter Theme",//全局主题theme: ThemeData(// 亮度 ： light：整个屏幕都白色   dark： 整个屏幕都是黑色brightness: Brightness.dark,//2.primarySwatch传入不是Color, 而是MaterialColor(包含了primaryColor和accentColor)primarySwatch: Colors.purple,//主题颜色：导航/底部的TabBarprimaryColor: Colors.orange,// 4.accentColor(次要颜色): 单独设置FloatingActionButton\SwitchaccentColor: Colors.deepPurpleAccent,// 5.卡片主题cardTheme:CardTheme(color: Colors.greenAccent,elevation: 10,shape: Border.all(width: 3, color: Colors.red),margin: EdgeInsets.all(10)),// 6.按钮主题buttonTheme: ButtonThemeData(minWidth: 10,height: 25,buttonColor: Colors.yellow),// 7.文本主题, 这里可以设置文本的不同的主题，然后在使用的地方调用//例子： Text("Hello World", style: Theme.of(context).textTheme.bodyText1,)textTheme: TextTheme(bodyText2: TextStyle(fontSize: 16, color: Colors.red),bodyText1: TextStyle(fontSize: 60),headline5: TextStyle(fontSize: 50),headline4: TextStyle(fontSize: 16),headline3: TextStyle(fontSize: 18),headline2: TextStyle(fontSize: 20),)),home: GYHomePage());}
}class GYHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text("首页"),),body: Center(child: Column(children: <Widget>[Text("Hello World"),Text("Hello World", style: TextStyle(fontSize: 14),),Text("Hello World", style: TextStyle(fontSize: 20),),Text("Hello World", style: Theme.of(context).textTheme.bodyText1,),Text("World", style: Theme.of(context).textTheme.headline5,),Switch(value: true, onChanged: (value) {},),CupertinoSwitch(value: true, onChanged: (value) {}, activeColor: Colors.red,),RaisedButton(child: Text("RRRRRR"), onPressed: () {},),Card(child: Text("你好啊,李银河", style: TextStyle(fontSize: 50),),)],),),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(title: Text("首页"),icon: Icon(Icons.home)),BottomNavigationBarItem(title: Text("分类"),icon: Icon(Icons.category))],),floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: () {},),);}
}

2022-02-25更新内容：做项目的时候我想自定义导航栏的背景颜色，之前项目是设置的primarySwatch属性，是可以有效的，但是该属性是MaterialColor类型的，发现该类智能设置固定的一些颜色，不能自定义别的颜色，于是我注释掉该属性，单独设置primaryColor属性的值，修改导航栏背景颜色，但是发现不起作用，经过网上查找一些资料，发现需要设置主题中的colorScheme属性，设置该属性中的primary（导航栏背景颜色属性），发现可以修改了。（示例：const ColorScheme.light(primary: Color(0xFF252525), onPrimary: Colors.white)）colorScheme属性占用还有许多其它的属性，想更全面了解，可以去看API

1.2 局部Theme

如果某个具体的Widget不希望使用全局的Theme，而希望自己来定义，应该怎么做？

非常简单，只需要在widget的父节点位置包裹一下Theme即可

创建另外一个新的页面，页面中使用新的主题

在新的页面的Scaffold外，包裹了一个Theme，并且设置data为一个新的ThemeData


class GYDetailPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Theme(data: ThemeData(//这里可以设置你新的主题)child: Scaffold(appBar: AppBar(title: Text("详情页"),backgroundColor: Colors.purple,),body: Center(child: Text("detail pgae"),),),);}
}//右下角floatingActionButton的点击事件
floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {return GYDetailPage();}));},),

但是很多时候我们并不是想完全使用一个新的主题，而是在之前的主题基础之上进行修改：

class GYDetailPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Theme(//在原主题的基础上进行修改data: Theme.of(context).copyWith(primaryColor: Colors.purple),child: Scaffold(appBar: AppBar(title: Text("详情页"),backgroundColor: Colors.purple,),body: Center(child: Text("detail pgae"),),//在原主题的基础上进行修改floatingActionButton: Theme(data: Theme.of(context).copyWith(colorScheme: Theme.of(context).colorScheme.copyWith(secondary: Colors.pink)),child: FloatingActionButton(child: Icon(Icons.pets),onPressed: () {},),),),);}
}

2. 黑暗Theme适配

2.1 darkTheme

目前很多应用程序都需要适配黑暗模式，Flutter中如何做到适配黑暗模式的适配了？

事实上MaterialApp中有Theme和darkTheme两个参数：

按照下面的写法，我们已经默认适配了黑暗主题

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(title: "Flutter Theme",theme: ThemeData.light(),darkTheme: ThemeData.dark(),home: GYHomePage());}
}

2.2 开发中适配

在开发中为了能适配两种主题（设置更多的主题）我们可以封装一个AppTheme

公共的样式抽取成常量
封装一个亮色主题
封装一个黑暗主题

class GYAppTheme {static const double smallFontSize = 16;static const double normalFontSize = 22;static const double largeFontSize = 24;//正常模式下的文本颜色static final Color norTextColors = Colors.red;//黑暗模式下的颜色static final Color darkTextColors = Colors.green;static final ThemeData norTheme = ThemeData(primarySwatch: Colors.yellow,textTheme: TextTheme(bodyText2: TextStyle(fontSize: normalFontSize, color: norTextColors)));static final ThemeData darkTheme = ThemeData(primarySwatch: Colors.grey,textTheme: TextTheme(bodyText2: TextStyle(fontSize: normalFontSize, color: darkTextColors)));
}

在MaterialApp中决定使用哪一个主题

class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: GYAppTheme.lightTheme,darkTheme: GYAppTheme.darkTheme,home: HYHomePage(),);}
}

flutter学习-主题风格相关推荐

Flutter 学习
Flutter 学习参照:https://book.flutterchina.club/ 参照:https://flutter.cn/docs/development/platform-integr ...
代码主题darcula_Pycharm最舒服的主题风格
所谓工欲善其事,必先利其器 ; 在我们日常开发中,长时间编码从眼睛上心里承受压力上有个好的视觉感觉是很加分的以下是我个人十分喜欢的pycharm主题风格,包含整体风格/字体/背景颜色/背景图片:其设 ...
iOS程序猿的flutter学习之路
日常学习Flutter开发的积累推荐一些平时自己学习Flutter开发当中接触到的优秀文章 -------------------------基础知识 ----------------------- ...
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
Flutter学习（一）
目录 Flutter学习(一) Flutter学习(二)-FlutterGo学习概念参考:Flutter 开发文档在 Flutter 中,几乎所有都是 widget,包括对齐 (alignmen ...
Flutter学习之入门和体验
作者:真丶深红骑士链接: https://juejin.im/user/597247ad5188255aed1fbba6 本文由作者授权发布. 01前言 1.什么是Flutter 上周我的一位微信好 ...
Flutter学习第十四天：Flutter类似于淘宝的首页照片墙功能，让你的界面更加美观灵活？
Flutter实现照片墙 1.把json数据转化为dart(model层) 2.通过http请求获取json数据(dao层) 3.实现demo界面的基础功能(view层) 这个功能是主要是学习flut ...
Flutter学习总纲教程
Flutter学习总纲教程 Flutter Widget 目录准备学习Flutter之前,必须要了解(不需要多么精通,但至少要了解)Dart的基础特性. Dart基础特性 · Dart 是 G ...
Vue + ElementUI 后台管理系统实现主题风格切换
一.目的此次写作内容是在我之前发布一篇文章的基础上进行新增的. 上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实 ...

flutter学习-主题风格

主题风格