文字列を表示する

公開日2018-04-16

更新日2023-06-05

Text に TextStyle を組み合わせることで、表示する文字列 (テキスト)を好みや用途に合わせてデザインできます。

文字列とは

文字列の表示は、プログラミングにおいて、一番基本的な要素の一つです。アプリ開発においても、重要な要素となります。このページで、文字列の扱い方をマスターしていきましょう。

文字列は、

Text(
  'ただのデフォルトの文字列だよ。',
)

のような簡単な記述で、表示することができます。引用符は、 " と ' を使用することができます。

Text( の後に、改行を入れていますが、改行は入れなくても構いません。また、引数の後に、カンマ , を残したままでも問題ありません。

改行する場合、文字列の中で改行したいところに \n を入れます。他の言語と似てます。

Text(
  '2行に渡る文字列だよ。\n2行に渡る文字列だよ。',
)

引用符が " でも ' でも改行の仕方は一緒です。

文字列のスタイルを編集する場合は、 TextStyle を使います。 Flutter には予め、 Colors というクラスにいくつもの色が定義されています。今回は、そのうちの Colors.red を利用してみましょう。

Text(
  '赤い文字列だよ。',
  style: TextStyle(
    color: Colors.red,
  ),
)

その他にもたくさんの定義済みの色が用意されています。

興味のある方は、こちらの公式ページを覗いてみてください。

自分で好きな色を選択して、デザインしたい場合：16進数のカラーコードを使う

カラーパレットから選んで自分の好きな色を使いたい場合は、Color クラスを使います。

この Color クラスを使う場合、カラー文字列（例：#4DC1E9）を整数値に変え、頭に 0XFF をつけたものを渡してあげます。

Text(
  'エヌ次元のテーマカラー文字列だよ。',
  style: TextStyle(
    color: Color(0xFF4DC1E9),
  ),
),

style という引数に、 TextStyle を入れることで、他にもさまざまな装飾が施すことができます。

文字の大きさを変えたい場合、fontSize というプロパティにピクセルの値で指定します。

Text(
  '太い文字列だよ。',
  style: TextStyle(
    fontSize: 26.0,
  ),
)

のようにします。

太字にしたい場合、以下のように fontWight プロパティを使います。

Text(
  '太い文字列だよ。',
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

文字の間隔を広げたい場合、 letterSpacing プロパティを使います。

Text(
  '文字間隔が広い文字列だよ',
  style: TextStyle(
    letterSpacing: 16.0
  ),
),

行間を設定したい場合、height プロパティに空けたい行間の値をピクセルで指定します。

Text(
  '行間を空けた文字列だよ。\n行間を空けた文字列だよ。',
   style: TextStyle(
    height: 3.0,
  ),
),

Web 開発でいう、 line-height のように思いますが、若干それとは異なるような挙動をします。目視でのチェックをオススメします。

$ というドル記号を使うことで、文字列の中に、変数の内容を挿入することができます。

final myVariable = "私のへんすう";
Text(
  'ここに「$myVariable」を表示してます。',
)

直接値を入れたいときや、変数と文字列の境がわからないときには、 ${} を使います。

final myVariable = "My variable";
Text(
  'Display ${255} and ${myVariable}s.',
)

引数 overflow に TextOverflow.ellipsis を適応することで、表示を強制的に一行に収めることができます。

Text(
  'とても長い文字列です。とても長い文字列です。とても長い文字列です。とても長い文字列です。とても長い文字列です。',
  overflow: TextOverflow.ellipsis,
),