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,
),
