Flutter基礎 – TextStyleを使って文字を装飾する(その2)

前回の続きです✨

前回は基本的なTextStyleの設定方法について学びました🙌

今回からは少し細かい設定方法なども紹介していきます😆

前回はこちら↓

テキストの装飾を設定しよう!

テキストの装飾についての設定です😆

  • 装飾の色を設定する
  • 装飾のスタイルを設定する
  • 装飾の太さを設定する

装飾の色を変える – decorationColor:

💡ポイント

  • decorationColorパラメータに”Colorオブジェクト”を渡す
  • 装飾の色を変えることができる
  • テキスト自体の色は変更しない
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                decoration: TextDecoration.overline,
                decorationColor: Colors.blue,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                decoration: TextDecoration.underline,
                decorationColor: Colors.red,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                decoration: TextDecoration.lineThrough,
                decorationColor: Colors.green,
              ),
            ),
          ],
        ),

// 省略

💡テキストを縦横に並べる方法については、こちらの記事で解説しています🙌

装飾線のスタイルを設定 – decorationStyle:

上から
[wavy(波線)],
[dotted(点線)],
[double(二重線)]

💡ポイント

  • decorationStyleパラメータに”TextDecorationStyleオブジェクト”を渡す
  • 装飾線のスタイルを変えることができる
  • dashed…破線
  • dotted…点線
  • double…二重線
  • solid…実線
  • wavy…波線
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                decoration: TextDecoration.overline,
                decorationStyle: TextDecorationStyle.wavy,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dotted,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                decoration: TextDecoration.lineThrough,
                decorationStyle: TextDecorationStyle.double,
              ),
            ),
          ],
        ),

// 省略

装飾線の太さを設定 – decorationThickness:

上から[無指定],[0,2],[2,0]

💡ポイント

  • decorationThicknessパラメータに太さを表す数値を渡す
  • 数値は”現在のフォントで定義されている太さの〇〇倍”という意味。
  • デフォルトは”1.0″。
  • フォントサイズを変えることなく装飾線の太さが変えられる。
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50,
                decoration: TextDecoration.underline,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                decoration: TextDecoration.underline,
                decorationThickness: 0.2,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                fontSize: 50.0,
                decoration: TextDecoration.underline,
                decorationThickness: 2.0,
              ),
            ),
          ],
        ),

// 省略

影をつける – shadows:

💡ポイント

  • shadowパラメータに”Shadowのリスト(List<Shadow>)”を渡す
  • テキストに影をつけることができる。
  • リストにShadowオブジェクトを複数含めることで、同じテキストに複数の影をつけることもできる。

※Shadowオブジェクトについては別記事にします。

// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(fontSize: 50, shadows: [
                Shadow(
                  color: Colors.grey,
                  offset: Offset(0.0, 10.0),
                  blurRadius: 8.0,
                ),
              ]),
            ),
            Text(
              'テキスト',
              style: TextStyle(fontSize: 50.0, shadows: [
                Shadow(
                  color: Colors.red,
                  blurRadius: 16.0,
                ),
              ]),
            ),
            Text(
              'テキスト',
              style: TextStyle(fontSize: 50.0, shadows: [
                Shadow(
                  color: Colors.blue,
                  offset: Offset(10.0, 10.0),
                ),
                Shadow(
                  color: Colors.green,
                  offset: Offset(-10.0, -10.0),
                ),
              ]),
            ),
          ],
        ),

// 省略

テキストの配置を調整しよう!

ここでいう”テキストの配置”とは、

Textウィジェットではなく”ひとつひとつの文字”ということです👌

ここでは、以下の設定方法を解説します😆

  • 文字ごとの間隔を設定する
  • ホワイトスペースの間隔を設定する
  • 行の高さを指定する

文字ごとの間隔を設定する – letterSpacing:

上からデフォルト、50.0、-10.0、-60.0

💡ポイント

  • letterSpacingパラメータに”文字ごとのスペースの幅に追加する量を表す数値(論理ピクセル)”を渡す
  • 1文字毎の間隔を調節できる
  • すでにある間隔に、プラスして加える量を指定する
  • マイナス値を設定すると、間隔を狭めることができる。

”文字毎”とは言っても、画像を見ると最後尾の文字にもスペースができていることから、

”文字後のスペース”の量を決めているっぽいですね…🤔

※実験的に「−60」を指定してみたら文字がひっくり返りました。この仕組についての検証や考察は、また別記事にしたいと思います😉

// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: 50.0,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: -10.0,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: -60.0,
              ),
            ),
          ],
        ),

// 省略

ホワイトスペースの間隔を設定する – wordSpacing:

上からデフォルト、50.0、-10.0、-60.0

💡ポイント

  • wordSpacingパラメータに”ホワイトスペースの幅に追加する量を表す数値(論理ピクセル)”を渡す
  • 1ワード毎の間隔を調節できる
  • ホワイトスペースにのみ適用される
  • マイナス値を設定すると幅を狭められる。
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: 50.0,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: -10.0,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: -60.0,
              ),
            ),
          ],
        ),

// 省略

💡もっと分かる!ポイント

letterSpacingとwordSpacingの違いは、

文字毎」か「ホワイトスペース毎」なのか、というところです。

僕はこれを調べていて疑問に思いました。

うっきー

wordSpacingって能力限定しすぎてあんまり使い時無くないか?

これについてしばらく考えてみたのですが、

日本語って文章の間に「ホワイトスペース」を入れることってあんまりないですよね🤔

でも、英語で文章を書くとき、

I will look up the word in the dictionary.

これだけで既に”8回”もホワイトスペースを入れてるわけですから、

アプリ内でレイアウト調整をする際”ホワイトスペースごとの間隔”も重要になってくるんだと思います。

なので、やっぱり日本語で書くときはあんまり使わない気がします(結論)

行の高さを指定する – height

(黄色エリア)文字列背景、
(灰色エリア)Textウィジェット背景

💡ポイント

  • heightパラメータに”テキストスパンの高さ(フォントサイズの倍数)を表す数値”を渡す
  • nullまたは無指定の場合、高さはフォントメトリックによって決定される(フォントサイズとは異なる)
  • null以外の値を指定した場合、高さは”フォントサイズ × height”となる。
// 省略

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: 50.0,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: -10.0,
              ),
            ),
            Text(
              'テキスト',
              style: TextStyle(
                backgroundColor: Colors.amber,
                fontSize: 30.0,
                letterSpacing: -60.0,
              ),
            ),
          ],
        ),

// 省略

💡フォントの設定方法については、こちらの記事で解説しています✨