【Flutter入門】Text widget 使い方あれこれ【サンプルコード】

様々な使い方ができるText widgetですが、毎回使い方を調べるのが面倒くさい。

今回は、Text widgetの使い方を一通りまとめました!
 

一番シンプルな使い方

◆ イメージ

◆ ソースコード

Text("This is a text")

文字の色を変えたい – color

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    color: Colors.red,
  ),
)

背景の色を変えたい – backgroundColor

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    backgroundColor: Colors.red,
  ),
)

文字の大きさを変えたい – fontSize

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    fontSize: 30.0,
  ),
)

※デフォルトのフォントサイズは14.0

太字にしたい – fontWeight: bold

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

もっと太くしたい – fontWeight: w900

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    fontWeight: FontWeight.w900,
  ),
)

w100からw900まで9段階で文字の太さを選ぶことができる。

デフォルトはw400、boldはw700と同じ太さで、w300以下を指定すればデフォルトより細くなる。

イタリックにしたい – fontStyle: italic

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    fontStyle: FontStyle.italic,
  ),
)

FontStyleで指定できるのは、normalとitalicのみ(2019年7月27日現在)

下線を引きたい – TextDecoration.underline

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

参考:How to underline text in flutter – Stack Overflow

下線の色を変えたい – decorationColor

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
  ),
)

下線の太さを変えたい – decorationThickness

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationThickness: 5,
  ),
)

文字の上に線を引きたい – TextDecoration.overline

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.overline,
  ),
)

打ち消し線を入れたい – TextDecoration.lineThrough

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
  ),
)

下線を破線にしたい – TextDecorationStyle.dashed

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

TextDecorationStyle.dottedを指定するともっと細かい破線になる。

下線を二重線にしたい – TextDecorationStyle.double

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.double,
  ),
)

下線を波線にしたい – TextDecorationStyle.wavy

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.wavy,
  ),
)

文字の間隔を広くしたい – letterSpacing

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    letterSpacing: 4.0,
  ),
)

単語の間隔を広くしたい – wordSpacing

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    wordSpacing: 4.0,
  ),
)

影(shadow)をつけたい – shadows

◆ イメージ

◆ ソースコード

Text(
  "This is a text",
  style: TextStyle(
    shadows: <Shadow>[
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 2.0,
        color: Color.fromARGB(255, 0, 0, 0),
      ),
    ],
  ),
)

offsetで文字の位置(ずらし方)を指定
blurRadiusでぼかし度を指定

参考:How can I add shadow to the text in flutter? – Stack Overflow

文字の一部だけ装飾したい(色や文字の大きさを変えたい) – RichText

◆ イメージ

◆ ソースコード

RichText(
  text: TextSpan(style: TextStyle(color: Colors.black), children: [
    TextSpan(text: 'This is '),
    TextSpan(
        text: 'a',
        style: TextStyle(
          fontSize: 50.0,
          color: Colors.red,
          decoration: TextDecoration.underline,
        )),
    TextSpan(text: ' text'),
  ]),
)

RichTextとTextSpanを使うことで文字列に対して、複数のスタイルを適用することができます。fontSize、color以外にも全ての装飾を使うことができます。

RichTextの使い方は次の記事で詳細に解説しています。

関連記事

◆ さまざまな下線の引き方を解説
How to underline text in flutter – Stack Overflow

◆ 複数パターンのShadowの使い方を解説
How can I add shadow to the text in flutter? – Stack Overflow