すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】Text ウィジェットのスタイル設定方法まとめ

Textウィジェットのデザイン設定をパターン別にまとめる。


Textウィジェットのスタイル設定方法

Textウィジェットのスタイルを設定する場合はstyleプロパティにTextStyleを指定することで行う。


Textウィジェットのスタイルパターン

Textスタイル設定方法をパターン別に説明する。

色付き文字

色付き文字

TextStylecolorプロパティで色を指定する。

背景色付き文字

背景色付き文字

TextStylebackgroundColorプロパティで色を指定する。

任意サイズ文字

任意サイズ文字

TextStylefontSizeプロパティでフォントサイズを指定する。

細字文字

細字文字

TextStylefontWeightプロパティでフォントの太さを指定する。 FontWeight.w100を指定することで最も細い文字になる。wに続く数値が大きいほど太くなる。

太字文字

太字文字

TextStylefontWeightプロパティでフォントの重さを指定する。 FontWeight.boldを指定することで太い文字になる。

超太字文字

超太字文字

TextStylefontWeightプロパティでフォントの太さを指定する。 FontWeight.w900を指定することで最も太い文字になる。

イタリック文字

イタリック文字

TextStylefontStyleプロパティでフォントのスタイルを指定する。 FontStyle.italicを指定することでイタリック体になる。

上線付き文字

上線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.overlineを指定することでテキストの上に線を引くことができる。

下線付き文字

下線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.underlineを指定することでテキストの下に線を引くことができる。

色下線付き文字

色下線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.underlineを指定し、さらにdecoraitonColorに色を指定することで色付きの下線を引くことができる。

太下線付き文字

太下線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.underlineを指定し、さらにdecorationThicknessにて太さを指定することで太い下線を引くことができる。 decorationThicknessに指定する数値が大きいほど線は太くなる。

打ち消し線付き文字

打ち消し線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.lineThroughを指定することでテキストに打ち消し線を引くことができる。

波線(はせん)下線付き文字

波線下線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.underlineを指定し、decorationStyleTextDecorationStyle.dashedを指定することで波線状の下線を引くことができる。

二重下線付き文字

二重下線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.underlineを指定し、decorationStyleTextDecorationStyle.doubleを指定することで二重下線を引くことができる。

波打った下線付き文字

波打った下線付き文字

TextStyledecorationプロパティでフォントのスタイルを指定する。 TextDecoration.underlineを指定し、decorationStyleTextDecorationStyle.wavyを指定することで波打った下線を引くことができる。

任意の文字間隔

任意の文字間隔

TextStyleletterSpacingプロパティで文字間隔を指定する。 letterSpacingに指定する数値を大きくするほど文字間隔が広くなる。

任意の単語間隔

任意の単語間隔

TextStylewordSpacingプロパティで単語間隔を指定する。 wordSpacingに指定する数値を大きくするほど単語間隔が広くなる。

影付き文字

影付き文字

TextStyleshadowsプロパティで影のスタイルを指定する。 offsetプロパティで影の位置を指定する。値が大きくなるほど文字本体から離れる。 blurRadiusで影のぼやけ具合を指定する。値が大きくなるほど影がぼやける。 colorで影の色を指定する。