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

生徒

「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におけるテキスト表示の基本としてTextウィジェットの使い方やフォント設定、文字色の変更、文字配置、複数行表示、さらにRichTextを使った高度な表現までを体系的に整理しました。Flutterテキスト表示はアプリ開発の中でも最も基本的でありながら、ユーザーインターフェースの印象を大きく左右する重要な要素です。Flutter初心者の方にとって、Textウィジェットの理解はアプリ開発の第一歩といえます。

Textウィジェットはシンプルに文字列を表示するための基本ウィジェットですが、TextStyleを組み合わせることでフォントサイズ変更、文字の太さ調整、斜体表示、カラー設定など多彩なカスタマイズが可能です。fontSizeやfontWeight、fontStyle、colorといったプロパティを理解することで、視認性の高いテキスト表現を実現できます。特にユーザーにとって読みやすいフォントサイズや配色を意識することは、ユーザー体験の向上に直結します。

またFlutterのテキスト配置ではCenterウィジェットを使うことで画面中央に配置でき、textAlignプロパティを使えば左揃えや中央揃え、右揃えなど柔軟なレイアウトが可能になります。これらの基本テクニックを組み合わせることで、シンプルな画面でも見やすく整ったデザインを実現できます。Flutterレイアウト設計においてテキスト配置は非常に重要なポイントです。

長い文章の扱いについても理解しておく必要があります。maxLinesやoverflowを設定することで、複数行表示や省略表示が可能となり、画面レイアウトの崩れを防ぐことができます。特にニュースアプリや商品一覧などでは、テキストの長さを制御することが実務上非常に重要になります。

フォントの指定についてはfontFamilyを利用することで、標準フォントだけでなくカスタムフォントを適用できます。ブランドイメージを重視したアプリではフォント選定が重要な役割を果たすため、pubspec設定と合わせて理解しておくと実践的です。

さらに高度なテキスト表現としてRichTextとTextSpanを使う方法も学びました。一つの文章内で複数のスタイルを適用できるため、強調表示や装飾付きテキストの実装に役立ちます。例えば重要なキーワードだけ色を変えるなど、ユーザーに伝えたい情報を視覚的に強調することが可能です。

Flutterテキスト表示の本質は、単なる文字出力ではなく、ユーザーに情報を正確かつ分かりやすく伝えるための設計にあります。フォントサイズ、色、配置、行数制御、スタイルの組み合わせを適切に使い分けることで、実用的で魅力的なユーザーインターフェースを構築できます。今回学んだ基本をベースに、実際にコードを書きながら理解を深めることが、Flutter開発スキル向上への近道です。

テキスト処理の基本ロジックサンプル


public class TextDisplaySample {
    public static void main(String[] args) {
        String message = "Flutterテキスト表示";
        for (int i = 0; i < message.length(); i++) {
            System.out.println("文字: " + message.charAt(i));
        }
    }
}


文字: F
文字: l
文字: u
文字: t
文字: t
文字: e
文字: r
文字: テ
文字: キ
文字: ス
文字: ト
文字: 表
文字: 示

このように文字列を一文字ずつ扱う処理の考え方は、FlutterのTextやRichTextで細かくスタイルを制御するイメージと共通しています。内部的にはテキストを分割し、それぞれにスタイルを適用することで柔軟な表示が可能になっています。

先生と生徒の振り返り会話

生徒

Flutterで文字を表示する方法がよく分かりました。Textウィジェットが基本なんですね。

先生

その通りです。Textは最も基本ですが、TextStyleを組み合わせることで多くの表現が可能になります。

生徒

フォントサイズや色を変えるだけでも見やすさがかなり変わると感じました。

先生

ユーザーにとって読みやすいUIを作るためには、そのような細かい調整が重要です。

生徒

RichTextを使えば一部だけ色を変えられるのも便利ですね。

先生

はい。強調したい部分を目立たせることで、より分かりやすい画面になります。

生徒

実際にいろいろなテキスト表示を試してみたいと思います。

先生

ぜひ実践してみてください。Flutterのテキスト表現を理解することは、アプリの完成度を高める重要なスキルです。

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

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

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

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

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

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

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

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

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

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

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

まとめ

テキスト処理の基本ロジックサンプル

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

プログラミング初心者からのよくある疑問／質問を解決します

Flutterで文字を表示する基本的な方法は何ですか？

Flutterで文字を表示するにはTextウィジェットを使います。Text('表示したい文字列')のように書くだけで、画面にテキストを表示できます。

Flutterで文字のフォントサイズを変更するにはどうすればいいですか？

TextウィジェットのstyleプロパティにTextStyleを指定し、fontSizeでフォントサイズを設定できます。たとえば、fontSize: 24 で文字を大きくできます。

Flutterでテキストの色を変える方法はありますか？

テキストの色を変更するには、TextStyleのcolorプロパティを使います。Colors.redやColors.blueなどのFlutter標準カラーを使って自由に色を指定できます。

関連記事