Flutter マテリアルデザインのテキストテーマ一覧

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,
      ),
    ],
  ),
),

// 省略

おわりに

技術的な情報が何もなくてごめんなさい 🙇🙇🙇

ただ、 テキストテーマを使おうとして あれでもない、これでもない、としている時間がもったいない と思ったのでまとめました。
（ホットリロードが強いとはいえ、テーマ決めるのに手間取ってたらイラついちゃいますしね）

この一覧が、どなたかの役に立てれば幸いです