Text ウィジェットを扱っていて style: Theme.of(context).textTheme.XXXXXX のかたちでテキストスタイル(フォントサイズ、フォントの太さ、文字間隔)を指定することは多々あります。
どれだけ種類があって、デバイス上でどのように表示されるか 調べてみましたが、パッと見でわかりやすいものがなかったのでまとめました。
公式ページより
こちら のページでテキストテーマについて取り上げられています。
| NAME | SIZE | WEIGHT | SPACING |
|---|---|---|---|
| display4 | 112.0 | thin | 0.0 |
| display3 | 56.0 | normal | 0.0 |
| display2 | 45.0 | normal | 0.0 |
| display1 | 34.0 | normal | 0.0 |
| headline | 24.0 | normal | 0.0 |
| title | 20.0 | medium | 0.0 |
| subhead | 16.0 | normal | 0.0 |
| body2 | 14.0 | medium | 0.0 |
| body1 | 14.0 | normal | 0.0 |
| caption | 12.0 | normal | 0.0 |
| button | 14.0 | medium | 0.0 |
| subtitle | 14.0 | medium | 0.0 |
| overline | 10.0 | normal | 0.0 |
このように一覧化はされていてテーマごとの文字も表示されているのですが、実際にデバイスで表示させたときのイメージが湧きませんでした。
(そしてなぜか subtitle と overline のテーマは載っていない)
デバイスに表示させてみる
端末に表示させるとこんな感じになるようです。
一応、テーマを利用しているところのソースコードも載せておきます。
// 省略
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'display4',
style: Theme.of(context).textTheme.display4,
),
Text(
'display3',
style: Theme.of(context).textTheme.display3,
),
Text(
'display2',
style: Theme.of(context).textTheme.display2,
),
Text(
'display1',
style: Theme.of(context).textTheme.display1,
),
Text(
'headline',
style: Theme.of(context).textTheme.headline,
),
Text(
'title',
style: Theme.of(context).textTheme.title,
),
Text(
'subhead',
style: Theme.of(context).textTheme.subhead,
),
Text(
'body2',
style: Theme.of(context).textTheme.body2,
),
Text(
'body1',
style: Theme.of(context).textTheme.body1,
),
Text(
'caption',
style: Theme.of(context).textTheme.caption,
),
Text(
'button',
style: Theme.of(context).textTheme.button,
),
Text(
'subtitle',
style: Theme.of(context).textTheme.subtitle,
),
Text(
'overline',
style: Theme.of(context).textTheme.overline,
),
],
),
),
// 省略
おわりに
技術的な情報が何もなくてごめんなさい 🙇🙇🙇
ただ、 テキストテーマを使おうとして あれでもない、これでもない、としている時間がもったいない と思ったのでまとめました。
(ホットリロードが強いとはいえ、テーマ決めるのに手間取ってたらイラついちゃいますしね)
この一覧が、どなたかの役に立てれば幸いです ![]()

