プログラミング

FlutterでTextを表示する方法を初心者向けにわかりやすく解説

FlutterでTextを表示する方法を初心者向けにわかりやすく解説

Flutterでアプリ開発を始めると、最初に「画面へ文字を表示したい」と考える方がほとんどです。

FlutterではTextウィジェットを使用することで、簡単に文字を表示できます。しかし、初めてFlutterに触れる方は「どこに書けばいいの？」「文字の色や大きさはどう変更するの？」と悩んでしまうことも少なくありません。

この記事では、Flutter初心者の方向けにTextウィジェットの基本的な使い方から文字サイズや色の変更方法までを分かりやすく解説します。

この記事を読み終える頃には、自分で自由に文字を表示できるようになっているでしょう。

目次

Flutterで文字を表示するにはTextウィジェットを使う

Flutterで文字を表示する場合は、Textウィジェットを使用します。

TextウィジェットはFlutterで最も基本的なウィジェットの一つであり、画面上へ文字列を表示する役割があります。

基本的な書き方は以下のとおりです。

Text(
  'Hello Flutter!',
)

このコードを実行すると、画面には次のように表示されます。

Hello Flutter!

非常にシンプルですが、FlutterではこのTextウィジェットを使うことで、タイトルや説明文、ボタンのラベルなどさまざまな場所で文字を表示できます。

Scaffoldへ表示する例

実際に画面へ表示する場合は、次のように記述します。

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Textサンプル'),
      ),
      body: const Center(
        child: Text(
          'Hello Flutter!',
        ),
      ),
    );
  }
}

この例では、Centerウィジェットを使用して画面中央へ文字を表示しています。

Centerウィジェットを使用して画面中央へ文字を表示
実行結果

Textウィジェットの基本的な使い方

Textウィジェットは文字を表示するだけでなく、色やサイズ、太さなども簡単に変更できます。

文字サイズを変更する

文字サイズはfontSizeで指定します。

Text(
  'Hello Flutter!',
  style: TextStyle(
    fontSize: 30,
  ),
)

数字が大きいほど文字も大きく表示されます。

文字色を変更する

文字色はcolorを指定します。

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

文字を太くする

太字はfontWeightを使用します。

Text(
  'Hello Flutter!',
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

まとめて指定する

複数の設定は同時に指定できます。

Text(
  'Hello Flutter!',
  style: TextStyle(
    fontSize: 28,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

よく使う設定は次のとおりです。

設定内容
fontSize文字サイズ
color文字色
fontWeight太さ
fontStyle斜体
letterSpacing文字間隔
height行間
フォントの色やサイズの変更例
実行結果

Textウィジェットでよく使う便利な設定

Textウィジェットには、文字の配置や長い文章を扱うための便利な機能もあります。

文字を中央揃えにする

Text(
  'Flutterを学ぼう！',
  textAlign: TextAlign.center,
)

使用できる主な配置は以下のとおりです。

  • left
  • center
  • right
  • justify
  • start
  • end

最大表示行数を指定する

Text(
  longText,
  maxLines: 2,
)

これにより、2行まで表示されます。

はみ出した文字を省略する

Text(
  longText,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

表示例

FlutterはGoogleが...

一覧画面などで非常によく利用される設定です。

constを付ける

表示内容が変わらない場合はconstを付けることが推奨されています。

const Text(
  'Hello Flutter!',
)

不要な再生成を減らせるため、パフォーマンス面でもメリットがあります。

Flutter初心者が覚えておきたいポイント

Flutterを学び始めたばかりの方は、まず以下のポイントを押さえておきましょう。

  • Textウィジェットで文字を表示する
  • styleで見た目を変更する
  • textAlignで配置を変更できる
  • maxLinesで表示行数を制限できる
  • overflowで文字のはみ出しを制御できる
  • 固定文字列ならconst Text()を利用する

最初はシンプルな文字表示だけで十分です。

Textウィジェットに慣れてきたら、ボタンや画像、アイコンなどのウィジェットと組み合わせることで、より実践的なアプリを作れるようになります。

まとめ

Flutterで文字を表示するには、Textウィジェットを使用します。

使い方は非常にシンプルですが、styleを利用することで文字サイズや色、太字などを自由に変更できます。また、textAlignやmaxLines、overflowなどを活用すれば、実際のアプリ開発でも使いやすい画面を作成できます。

まずは今回紹介したサンプルコードを実際に動かしながら、Textウィジェットの使い方に慣れてみましょう。Flutterの基本を身につけることで、今後のアプリ開発がスムーズに進められるようになります。