【Flutter】テキストのスタイルを設定する方法【チートシート】

はじめに

テキストのスタイルを設定する方法をまとめました。

設定方法：テキストウィジェットに style: TextStyle を追加する。

Text('文字',
 style: TextStyle(　ここにスタイルの内容　)
),

色付き文字

文字色が変更されます。

// 赤
style: TextStyle(color: Colors.red)

背景色付き文字

文字の背景色が変更されます。

// アンバー
style: TextStyle(backgroundColor: Colors.amber)

文字サイズ変更

文字のサイズが変更されます。

// 文字サイズ32
style: TextStyle(fontSize: 32)

太さ変更

文字の太さが変更されます。

// 太文字
style: TextStyle(fontWeight: FontWeight.bold)

また、FontWeight.W<100~900>の範囲で太さを変更できます。

// 細文字 ( w100~900 任意の太さを指定可能 )
style: TextStyle(fontWeight: FontWeight.w100)

書体変更

斜め文字に変更できます。

style: TextStyle(fontStyle: FontStyle.italic)

fontFamilyで任意のフォントに変更することもできます。

style: TextStyle(fontFamily: 'Aoboshi One')

線付き文字

文字上にラインを追加します。

style: TextStyle(decoration: TextDecoration.overline)

アンダーラインを追加します。

style: TextStyle(decoration: TextDecoration.underline)

decorationColorとの併用も可能です。

style: TextStyle(decoration: TextDecoration.underline,
                  decorationColor: Colors.red)

decorationThicknessでラインの太さも変更できます。

style: TextStyle(decoration: TextDecoration.underline,
                  decorationThickness: 4)

打ち消し線を追加します。

style: TextStyle(decoration: TextDecoration.lineThrough)

アンダーラインを点線に変更できます。

style: TextStyle(decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.dashed)

TextDecorationStyle.doubleで二重線に変更できます。

style: TextStyle(decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.double)

アンダーライン（波線）を追加します。

style: TextStyle(decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.wavy)

影付き文字

文字に影を追加できます。

[Shadow(offset: Offset(5, 5)で影の位置

blurRadiusシャドウのぼかし効果の半径を指定します。

style: TextStyle(shadows: [Shadow(offset: Offset(5, 5), blurRadius: 2, color: Colors.black)])

まとめ

いかがだったでしょうか？

ご意見、ご感想ありましたらお気軽にコメントしてください。

Flutter開発において超基本なので参考になれば幸いです。

【参考文献】