FlutterでTextを装飾する7つの方法！テキストのスタイリングをマスター

Flutterでは、Textウィジェットを使用してアプリ内でテキストを表示できます。この記事では、FlutterのTextウィジェットを装飾する7つの基本的な方法を紹介します。

Textウィジェットの基本

Textウィジェットは、Flutterで最も頻繁に使用されるウィジェットの一つです。単に文字列を表示するだけでなく、styleオプションでテキストのスタイリングが可能です。

テキストの装飾方法

それでは、Textウィジェットの見た目をカスタマイズする方法を見ていきましょう。

文字色を変える

TextStyleのcolorプロパティを使用して文字色を変更できます。

Text(
  'Hello, world!',
  style: TextStyle(color: Colors.blue),
)

文字サイズを変える

TextStyleのfontSizeプロパティを使って、テキストのサイズを調整します。

Text(
  'Hello, world!',
  style: TextStyle(fontSize: 24),
)

下線を引く

TextStyleのdecorationプロパティにTextDecoration.underlineを指定します。

Text(
  'Hello, world!',
  style: TextStyle(decoration: TextDecoration.underline),
)

取り消し線を引く

同じくdecorationプロパティにTextDecoration.lineThroughを指定します。

Text(
  'Hello, world!',
  style: TextStyle(decoration: TextDecoration.lineThrough),
)

背景色を付ける

Textウィジェット自体に背景色を設定するプロパティはありませんが、Containerウィジェットを使ってテキストを囲み、colorプロパティで背景色を設定できます。

Container(
  color: Colors.yellow,
  child: Text('Hello, world!'),
)

文字ピッチ（文字間のスペース）を指定する

TextStyleのletterSpacingプロパティで文字間のスペースを調整します。

Text(
  'Hello, world!',
  style: TextStyle(letterSpacing: 2.0),
)

TextSpanを使って一部の文字だけ装飾する

TextSpanとRichTextを使うと、同じ行内で異なるスタイルを適用したテキストを表示できます。

RichText(
  text: TextSpan(
    text: 'Hello',
    style: TextStyle(color: Colors.blue, fontSize: 24),
    children: <TextSpan>[
      TextSpan(text: ' world', style: TextStyle(color: Colors.red)),
      TextSpan(text: '!', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

まとめ

これらの装飾オプションを使って、Flutterアプリケーション内のテキストを魅力的に演出しましょう。