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

様々な使い方ができる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以外にも全ての装飾を使うことができます。

関連記事

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

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

・その他のwidgetについてはこちら
 カテゴリ-Flutter

 

こちらのプログラミング書籍もおすすめ
(若手プログラマー向け、コーディングのレベルが1段階アップ!)

レガシーコード改善ガイド

  • 特定の言語に限らず、プログラミング初心者で理論から学びたい方におすすめ
  • プログラムに不具合が発生する仕組みや原理を理解できます。
  • その結果、不具合に強いコードが理解でき、書けるようになります。
  • 既存動作を担保しつつ、ソースをリファクタするための方法論を知ることができます。
  • テーマはテストですが、コーディングのレベルアップにも大きく役立ちます

Head First Java 第2版 ―頭とからだで覚えるJavaの基本

  • Javaなどのオブジェクト指向プログラミングの初心者におすすめ
  • 初心者が躓きやすいポイントをわかりやすく解説(インターフェースオブジェクト指向ポリモーフィズムなど)
  • コードをシンプルに保つことができるようになる
  • ポリモーフィズムを利用した、拡張しやすいプログラムをつくることができるようになる。

 

この記事を書いた人

たかお

IT企業で開発者として6年経験を積んだ後、2019年からインドIT企業の日本法人でITコンサルにジョブチェンジ。
 
プログラミングはjava、js、html、cssあたりを仕事で6年くらい。
個人ではFlutterをいじってます。
学んだことを発信していきます。よろしくお願いします!
 
firebaseで簡単なタイピングアプリを作ってみました。
もしよければ遊んでみてください!
1位の記録や管理人(私)の記録と勝負できるようになってます!
 
タイピング・チャレンジャー
https://typing-challenger.com/