【Flutter】【1分で分かる】Textウィジェットの基本的な使い方【サンプル】

今回はFlutterでよく使う「Text」ウィジェットについてです。

この記事で分かること

✅「Text」ウィジェットって何？
✅「Text」ウィジェットの基本的な使い方
✅「Text」ウィジェットの主なプロパティとメソッドについて

目次

「Text」ウィジェットとは

Textは文字列を表示するためのメソッドです。第1引数に表示する文字列を指定します。

具体例

Text(
    'こんにちは！！\nFlutter！！\nアプリ開発！！',//表示する文字列
    textAlign: TextAlign.center,//中央に寄せる
    overflow: TextOverflow.ellipsis,//あふれた文字を「・・・」で省略して表示
    style: TextStyle(
    fontWeight: FontWeight.bold,//太字にする
    fontSize: 30),//フォントサイズを30pxにする
),

これで以下図1のように表示されます。

図1

使用しているプロパティの説明

textAlign

説明：要素を寄せる位置を変更でき、left、right、center、start、end、justifyが指定できます。

overflow

説明：画面オーバーした文字をどう表示するか指定できます。clip、fade、ellipsis、visibleが指定でき、あふれた文字を「・・・」表示にする「ellipsis」がよく使われます。

style

説明：テキストのフォントやサイズ等を指定できます。

その他よく使うプロパティの説明

softWrap

説明：折り返しをするかしないかを指定できます。デフォルトはtrueで折り返します。falseにすると折り返しません。falseの場合は前述した「overflow」プロパティと一緒に使います。

maxLines

行数を指定できます。指定した行数まで改行され、それ以上に文章が長くなる場合の表示は前述した「overflow」プロパティの値により変わります。

textScaleFactor

指定されている「fontSize」プロパティの倍率を指定できます。2.1を指定したら2.1倍になります。

まとめ

今回はFlutterのTextウィジェットについて基本的な使い方を解説しました。Textを使わないアプリは珍しいと思うのでここの内容はしっかりおさえておきましょう！

以上となります、最後までお読みいただきありがとうございました！

Flutterの基本をがっちり固めるためには以下記事で紹介している本がおすすめです。