质感设计的Theme类将主题应用于后代控件，主题描述了应用程序的颜色和排版选择。后代控件使用Theme.of获取当前主题的ThemeData对象，当控件使用Theme.of时，如果主题稍后更改，则会自动重建，以便可以应用更改。我们可以通过Theme.of查看当前应用程序的配色方案。
class _MyHomePageState extends State<MyHomePage> {
Widget _colorDisplayBox(String explanation, String name, Color color) {
return new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Text("$explanation\n$name\t\t"),
new Flexible(
child: new Container(
height: 30.0, decoration: new BoxDecoration(color: color)))
],),
new Divider()
],);}
@override
Widget build(BuildContext context) {
return new Scaffold(
//...
body: new Center(
child: new ListView(
padding: new EdgeInsets.all(8.0),
children: <Widget>[
_colorDisplayBox("突出颜色", "highlightColor", Theme.of(context).highlightColor),
_colorDisplayBox("提示颜色", "hintColor", Theme.of(context).hintColor),
_colorDisplayBox("文本选择手柄颜色", "textSelectionHandleColor", Theme.of(context).textSelectionHandleColor),
_colorDisplayBox("文字选择颜色", "textSelectionColor", Theme.of(context).textSelectionColor),
_colorDisplayBox("背景颜色", "backgroundColor", Theme.of(context).backgroundColor),
_colorDisplayBox("强调颜色", "accentColor", Theme.of(context).accentColor),
_colorDisplayBox("画布颜色", "canvasColor", Theme.of(context).canvasColor),
_colorDisplayBox("卡片颜色", "cardColor", Theme.of(context).cardColor),
_colorDisplayBox("按钮颜色", "buttonColor", Theme.of(context).buttonColor),
_colorDisplayBox("对话框背景颜色", "dialogBackgroundColor", Theme.of(context).dialogBackgroundColor),
_colorDisplayBox("禁用颜色", "disabledColor", Theme.of(context).disabledColor),
_colorDisplayBox("分频器颜色", "dividerColor", Theme.of(context).dividerColor),
_colorDisplayBox("错误颜色", "errorColor", Theme.of(context).errorColor),
_colorDisplayBox("指示灯颜色", "indicatorColor", Theme.of(context).indicatorColor),
_colorDisplayBox("原色", "primaryColor", Theme.of(context).primaryColor),
_colorDisplayBox("脚手架背景颜色", "scaffoldBackgroundColor", Theme.of(context).scaffoldBackgroundColor),
_colorDisplayBox("次标头颜色", "secondaryHeaderColor", Theme.of(context).secondaryHeaderColor),
_colorDisplayBox("选择行颜色", "selectedRowColor", Theme.of(context).selectedRowColor),
_colorDisplayBox("飞溅颜色", "splashColor", Theme.of(context).splashColor),
_colorDisplayBox("未选择的控件颜色", "unselectedWidgetColor", Theme.of(context).unselectedWidgetColor),
],),),);}}
我们可以自定义配色，比如设置primaryColor为红色。还可以使用primaryColorBrightness设置primaryColor的亮度，用于设置放置在原色顶部的文本和图标的颜色。
需要注意这里的亮度是描述颜色的对比度需求，有两个常量。Brightness.dark表示颜色很暗，需要浅色文字颜色才能实现可读性，例如颜色可能是深灰色，需要白色文字。Brightness.light表示颜色很浅，需要深色文字颜色来实现可读性，例如颜色可能是明亮的白色，需要黑色文字。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(
primaryColor: Colors.red,
primaryColorBrightness: Brightness.dark,
),
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
我们还可以根据不同平台设置主题，比如我们在iOS上设置白色和灰色主题，在Android上设置紫色和橙色主题。判断平台类型需要使用defaultTargetPlatform来识别当前系统平台，然后根据平台类型设置主题。
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
void main() {
runApp(new MyApp());
}
final ThemeData kIOSTheme = new ThemeData(
primarySwatch: Colors.orange,
primaryColor: Colors.grey[100],
primaryColorBrightness: Brightness.light,
);
final ThemeData kDefaultTheme = new ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.orangeAccent[400],
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: defaultTargetPlatform == TargetPlatform.iOS
? kIOSTheme
: kDefaultTheme,
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
在上面的代码中，有一段大家可能有疑问：primarySwatch: Colors.orange。颜色（Color）是ARGB格式的不可变的32位颜色值，具有相关颜色的小表的颜色称为样本（Swatch），颜色和样本的常量，表示质感设计的调色板。
大多数色板的颜色从100到900，增量为100，加上颜色50。数字越小，颜色越浅，数字越大，颜色越暗。强调色调（例如redAccent）只有数值100、200、400和700。
此外，还有一系列具有普遍不透明度的黑色和白色。例如，black54是具有54％不透明度的纯黑色。
要从其中一个色板中选择特定颜色，需要使用所需特定颜色的整数索引到样本。每个颜色样本常量是一种颜色，可以直接使用。
Color selection = Colors.green[400];
new Container(
color: Colors.blue,
)
我们都知道在 Flutter 中可以通过 fontFamily 来引入第三方字体，例如通常会将 svg 图标转换为 **iconfont.ttf** 来实现矢量图标的入，而一般情况下我们是不会设置 fontFamily 来使用第三方字体， 那默认情况下 Flutter 使用的是什么字体呢？
会出现这个疑问，是因为有一天设计给我发了下面那张图，问我 “为什么应用在苹果平台上的英文使用的是 PingFang SC 字体而不是 .SF UI Display ” ？ 正如下图所示，它们的 G 字母在显示效果上会有所差异，比如 平方的 G 有明显的转折线。
这时候我不禁产生的好奇，在 Flutter 中引擎默认究竟是如何选择字体？
通过官方解释，在 typography.dart 源码中可以看到，
- Flutter 默认在 Android 上使用的是
Roboto字体； - 在 iOS 上使用的是
.SF UI Display或者.SF UI Text字体。
The default font on Android is Roboto and on iOS it is .SF UI Display or .SF UI Text (SF meaning San Francisco). If you want to use a different font, then you will need to add it to your app.
那理论上在 iOS 使用的就是 .SF UI Display 字体才对，因为如下源码所示，在 Typography 中当 platform 是 iOS 时，使用的就是 Cupertino 相关的 TextTheme，而 Typography 中的 white 和 black 属性最终会应用到 ThemeData 的 defaultTextTheme、 defaultPrimaryTextTheme 和 defaultAccentTextTheme 中，所以应该是使用 .SF 相关字体才会，为什么会显示的是 PingFang SC 的效果？
factory Typography({
TargetPlatform platform = TargetPlatform.android,
TextTheme black,
TextTheme white,
TextTheme englishLike,
TextTheme dense,
TextTheme tall,
}) {
assert(platform != null || (black != null && white != null));
switch (platform) {
case TargetPlatform.iOS:
black ??= blackCupertino;
white ??= whiteCupertino;
break;
case TargetPlatform.android:
case TargetPlatform.fuchsia:
black ??= blackMountainView;
white ??= whiteMountainView;
}
englishLike ??= englishLike2014;
dense ??= dense2014;
tall ??= tall2014;
return Typography._(black, white, englishLike, dense, tall);
}
为了搞清不同系统上字体的区别，在查阅了资料后可知：
- 默认在 iOS 上：
- 中文字体：
PingFang SC - 英文字体：
.SF UI Text、.SF UI Display
- 中文字体：
- 默认在 Android 上：
- 中文字体：
Source Han Sans/Noto - 英文字体：
Roboto
- 中文字体：
也就是就 iOS 上除了 .SF 相关的字体外，还有 PingFang 字体的存在，这时候我突然想起在之前的 《Flutter完整开发实战详解(十七、 实用技巧与填坑二)》 中，因为国际化多语言在 .SF 会出现显示异常，所以使用了 fontFamilyFallback 强行指定了 PingFang SC 。
getCopyTextStyle(TextStyle textStyle) {
return textStyle.copyWith(fontFamilyFallback: ["PingFang SC", "Heiti SC"]);
}
终于破案了，因为当 fontFamily 没有设置时，就会使用 fontFamilyFallback 中的第一个值将作为首选字体，而在 fontFamilyFallback 中是顺序匹配的，当fontFamily 和 fontFamilyFallback 两者都不提供，则将使用默认平台字体。
而在 1.12.13 版本下测试发现 .SF 导致的问题已经修复了，所以只需要将 fontFamilyFallback 相关的代码去除即可。
那在 iOS 上使用 .SF 字体有什么好处？ 按照网络上的说法是：
SF Text的字距及字母的半封闭空间，比如"a"!上半部分会更大，因其可读性更好，适用于更小的字体;SF Display则适用于偏大的字体。具体分水岭就是20pt, 即字体小于20pt时用Text，大于等于20pt时用Display。 更棒的是由于SF属于动态字体，Text和Display两种字体族是系统动态匹配的，也就是说你不用费心去自己手动调节，系统自动根据字体的大小匹配这两种显示模式。
那能不能在 Android 上也使用.SF 字体呢？按照官方的说法：
- 在使用 Material package 时，在 Android 上使用的是 ·Roboto font· ，而 iOS 使用的是
San Francisco font(SF)； - 在使用 Cupertino package 时，默认主题始终使用
San Francisco font(SF)；
但是因为 San Francisco font license 限制了该字体只能在 iOS、macOS 或 tvOS 上运行使用，所以如果使用了 Cupertino 主题的话，在 Android 上运行时使用 fallback font。
所以你觉得能不能在 Android 上使用？
最后再补充下，在官方的 architecture 中有提到，在 Flutter 中的文本呈现逻辑是有分层的，其中：
- 衍生自 Minikin 的 libtxt 库用于字体选择，分隔行等；
- HartBuzz 用于字形选择和成型；
- Skia作为 渲染 / GPU后端；
- 在 Android / Fuchsia 上使用 FreeType 渲染，在 iOS 上使用CoreGraphics 来渲染字体 。
在 Flutter 中，是没有直接设置 Text 行间距的方法的， Text 显示的效果是如下图所示的逻辑组成：
那么我们应该如何处理行间距呢？如下图所示，通过设置 StrutStyle 的 leading , 然后利用 Transform 做计算翻方向位置偏移，因为 leading 是上下均衡的，所以计算后就可以得到我们所需要的行间距大小。 (虽然无法保证一定 100%像素准确，你是否还知道其他方法？)
这里额外提一点，可以通过父节点使用
DefaultTextStyle来实现局部样式的共享哦。
