Textウィジェットのデザイン設定をパターン別にまとめる。
Textウィジェットのスタイル設定方法
Textウィジェットのスタイルを設定する場合はstyleプロパティにTextStyleを指定することで行う。
Textウィジェットのスタイルパターン
Textスタイル設定方法をパターン別に説明する。
色付き文字
TextStyleのcolorプロパティで色を指定する。
背景色付き文字
TextStyleのbackgroundColorプロパティで色を指定する。
任意サイズ文字
TextStyleのfontSizeプロパティでフォントサイズを指定する。
細字文字
TextStyleのfontWeightプロパティでフォントの太さを指定する。
FontWeight.w100を指定することで最も細い文字になる。wに続く数値が大きいほど太くなる。
太字文字
TextStyleのfontWeightプロパティでフォントの重さを指定する。
FontWeight.boldを指定することで太い文字になる。
超太字文字
TextStyleのfontWeightプロパティでフォントの太さを指定する。
FontWeight.w900を指定することで最も太い文字になる。
イタリック文字
TextStyleのfontStyleプロパティでフォントのスタイルを指定する。
FontStyle.italicを指定することでイタリック体になる。
上線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.overlineを指定することでテキストの上に線を引くことができる。
下線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.underlineを指定することでテキストの下に線を引くことができる。
色下線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.underlineを指定し、さらにdecoraitonColorに色を指定することで色付きの下線を引くことができる。
太下線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.underlineを指定し、さらにdecorationThicknessにて太さを指定することで太い下線を引くことができる。
decorationThicknessに指定する数値が大きいほど線は太くなる。
打ち消し線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.lineThroughを指定することでテキストに打ち消し線を引くことができる。
波線（はせん）下線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.underlineを指定し、decorationStyleにTextDecorationStyle.dashedを指定することで波線状の下線を引くことができる。
二重下線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.underlineを指定し、decorationStyleにTextDecorationStyle.doubleを指定することで二重下線を引くことができる。
波打った下線付き文字
TextStyleのdecorationプロパティでフォントのスタイルを指定する。
TextDecoration.underlineを指定し、decorationStyleにTextDecorationStyle.wavyを指定することで波打った下線を引くことができる。
任意の文字間隔
TextStyleのletterSpacingプロパティで文字間隔を指定する。
letterSpacingに指定する数値を大きくするほど文字間隔が広くなる。
任意の単語間隔
TextStyleのwordSpacingプロパティで単語間隔を指定する。
wordSpacingに指定する数値を大きくするほど単語間隔が広くなる。
影付き文字
TextStyleのshadowsプロパティで影のスタイルを指定する。
offsetプロパティで影の位置を指定する。値が大きくなるほど文字本体から離れる。
blurRadiusで影のぼやけ具合を指定する。値が大きくなるほど影がぼやける。
colorで影の色を指定する。
