先生と生徒の会話形式で理解しよう

生徒

「Flutterで文字を表示したいんですが、どうやってやるんですか？」

先生

「FlutterではTextウィジェットを使えば簡単に文字を表示できますよ。フォントや色も自由に変えられます。」

生徒

「フォントサイズや色の変更もできるんですか？」

先生

「もちろんです。今日はFlutterのテキスト表示、フォントの設定、文字色の変更について詳しく解説していきます。」

1. Textウィジェットで文字を表示する基本

Flutterでテキストを表示するにはTextウィジェットを使用します。最も基本的な構文はとてもシンプルです。


Text('こんにちは Flutter');

このコードは単純に「こんにちは Flutter」という文字列を画面に表示します。Flutterアプリ内のどこでも使える基本のウィジェットです。

2. フォントサイズやスタイルを変えるには？

Textウィジェットにはstyleプロパティがあり、そこにTextStyleを指定することで、文字の大きさや太さ、斜体などを変更できます。


Text(
  '大きな文字',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
);

fontSizeで文字の大きさ、fontWeightで文字の太さ（bold）を指定できます。

3. テキストの色を変更する

文字の色を変更したいときは、TextStyleのcolorプロパティを使います。FlutterではColorsクラスで様々な色が用意されています。


Text(
  '赤いテキスト',
  style: TextStyle(
    color: Colors.red,
    fontSize: 18,
  ),
);

FlutterのカラーはColors.blueやColors.greenなど多数用意されており、カスタムカラーを使いたいときはColor(0xFFxxxxxx)の形式でも指定可能です。

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. 中央に文字を表示する方法

テキストを画面の中央に配置したい場合は、CenterウィジェットでTextを囲みます。


Center(
  child: Text(
    '中央のテキスト',
    style: TextStyle(fontSize: 20),
  ),
)

Centerを使うことで、テキストを水平・垂直の中心に配置することができます。FlutterのUIでよく使われる基本テクニックです。

5. TextAlignで文字揃えをコントロール

TextウィジェットにはtextAlignというプロパティがあり、左寄せ・中央揃え・右寄せなどを指定できます。


Text(
  '中央揃えのテキスト',
  textAlign: TextAlign.center,
  style: TextStyle(fontSize: 16),
);

他にもTextAlign.left、TextAlign.right、TextAlign.justifyなども使用できます。画面レイアウトに合わせて適切に設定しましょう。

6. 複数行テキストと折り返し表示

FlutterのTextは長い文章を自動で折り返して表示してくれますが、必要に応じて最大行数を制限したり、省略記号（...）を付けたりもできます。


Text(
  'とてもとても長い文章が続いていますが、全部表示すると大変なので...',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

maxLinesで表示する行数を指定し、overflowではみ出した場合の動作（省略記号、切り捨てなど）を設定します。

7. Flutterで使える代表的なフォントファミリー

FlutterではfontFamilyプロパティでフォントを指定できます。デフォルトの他にも、プロジェクトにカスタムフォントを追加して設定することも可能です。


Text(
  'フォントを指定した文字',
  style: TextStyle(
    fontSize: 18,
    fontFamily: 'Roboto',
  ),
);

pubspec.yamlにフォントファイルを登録すれば、任意のフォントファミリーをFlutterアプリで使用できます。

8. TextStyleの組み合わせ活用術

文字の色、サイズ、フォント、太さ、斜体などはTextStyleを使ってまとめて設定できます。


Text(
  'カスタムスタイルのテキスト',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w600,
    fontStyle: FontStyle.italic,
    color: Colors.deepPurple,
    letterSpacing: 2.0,
  ),
);

letterSpacingで文字間隔を調整したり、fontStyleで斜体にしたりと、表現の幅が広がります。

9. RichTextとTextSpanで一部だけ装飾する

テキストの一部だけ色やフォントを変えたい場合には、RichTextとTextSpanを使います。


RichText(
  text: TextSpan(
    children: [
      TextSpan(text: '通常の文字 ', style: TextStyle(color: Colors.black)),
      TextSpan(text: '赤文字', style: TextStyle(color: Colors.red)),
    ],
  ),
);

1つのテキストの中に複数のスタイルを適用できるので、強調したい部分だけ色を変えるなど便利です。

この記事を読んだ人からの質問

Flutterのテキスト表示・フォント・色設定の基本！初心者向けにやさしく解説