【Flutter】テキストの表示
Text
Textは、単一スタイルのテキストを表示するのに使用します。
Text('はじめてのテキスト')以下のプロパティによってテキストの位置やスタイルを設定します。
位置
テキストの位置はtextAlignプロパティにTextAlignを指定することで設定します。
Text(
'テキストの位置',
textAlign: TextAlign.center,
)TextAlign.left: 左寄せTextAlign.center: 中央寄せTextAlign.right: 右寄せ
スタイル
テキストの色や大きさなどのスタイルは、styleプロパティにTextStyleを指定することで設定します。
Text(
'テキストのスタイル',
style: TextStyle(
backgroundColor: Colors.red,
color: Colors.white,
fontSize: 20,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
letterSpacing: 4.0,
),テキストのスタイル
TextStyleには以下のプロパティがあります。
一部のプロパティについては別途説明します。
| プロパティ | 設定例 | 説明 |
|---|---|---|
backgroundColor | Colors.red | 背景色 |
color | Colors.white | 文字色 |
fontSize | 20 | フォントサイズ |
fontStyle | FontStyle.italic | フォントスタイル（イタリック） |
fontWeight | FontWeight.bold | 文字の太さ |
height | 5 | 行の高さ` |
letterSpacing | 4 | 文字間隔 |
wordSpacing | 4 | 単語間隔 |
フォントサイズについては、styleプロパティとは別にtextScaleFactorプロパティがあります。
こちらは倍率を指定することでフォントサイズを変化させます。
Text(
'フォントサイズの変更',
textScaleFactor: 2
)decoration
decorationプロパティでは、下線などの線をテキストに設定することができます。
また関連するdecorationColor、decorationStyleによって色と形状を変化させることができます。
Text(
'下線付きテキスト',
TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.double
)
)下線付きテキスト
TextDecoration（線の位置）overline: 上線lineThrough: 取消線（中線）underline: 下線
TextDecorationStyle（線のスタイル）solid: 単独線double: 二重線dotted: 点線dashed: 破線wavy: 波線
fontFamily
フォントの種類を変える場合は、Google Fontなどから使用したいフォントをダウンロードします。
ダウロードした zip ファイルを解凍すると、いくつかttfファイルがあるので、
これらのファイルをfontsというフォルダを作成して配置します。
次にpubspec.yamlを編集します。
以下のように配置したファイルと対応する文字の太さを割り当てます。
flutter:
fonts:
- family: M PLUS Rounded 1c
fonts:
- asset: fonts/MPLUSRounded1c-Regular.ttf
- asset: fonts/MPLUSRounded1c-Thin.ttf
weight: 100
- asset: fonts/MPLUSRounded1c-Light.ttf
weight: 300
- asset: fonts/MPLUSRounded1c-Medium.ttf
weight: 500
- asset: fonts/MPLUSRounded1c-Bold.ttf
weight: 700
- asset: fonts/MPLUSRounded1c-ExtraBold.ttf
weight: 800
- asset: fonts/MPLUSRounded1c-Black.ttf
weight: 900イタリックなどのフォントスタイルがある場合はstyle: italicを指定します。
テキストにフォントを適用する場合はfontFamilyプロパティを使用します。
Text(
'フォント指定',
fontFamily: 'M PLUS Rounded 1c'
)折り返し
親の幅を超える文字数を設定する場合、デフォルトでは文字が折り返されます。
折り返しをしたくない場合はsoftWrapプロパティにfalseを設定します。
Text(
'折り返しをしたくない',
softWrap: false
)■ 折り返しあり（デフォルト）
寿限無寿限無五劫のすりきれ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路のぶら小路パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナの長久命の長助
■ 折り返しなし
上記のプレビューを見ていただくとわかるように、文字が中途半端に切れてしまします。
これを解決するためにoverflowプロパティを設定します。
overflowプロパティには、TextOverflowを指定します。
Text(
'末尾の処理を行う',
softWrap: false,
overflow: TextOverflow.ellipsis,
)clip: 幅いっぱいに文字を表示します。ellipsis: 末尾を...とすることで、幅内で文字を表示します。fade:clipと同じく幅いっぱいに文字を表示しますが、末尾が透過します。visible: 幅に関係なく文字を表示します。
■ clip（デフォルト）
■ ellipsis
■ fade
■ visible
寿限無寿限無五劫のすりきれ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路のぶら小路パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナの長久命の長助
softWrapプロパティでは文字が 1 行になってしましますが、maxLinesプロパティを指定することで表示する最大の行数を設定することができます。
Text(
'2行表示する',
maxLines: 2,
overflow: TextOverflow.ellipsis,
)RichText
RichTextは、TextSpanと組み合わせることにより、テキストの一部のスタイルを変更することができます。
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text: 'はじめての',
),
TextSpan(
text: 'RichText',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
TextSpan(
text: 'です',
),
],
),
)はじめての RichText です
テキストの位置を設定するtextAlignや、折り返しを設定するsoftWrapやmaxLinesは、RichTextのプロパティとして設定します。
TextSpan
TextSpanについてもう少しだけ深掘りします。
上例でも分かるように、部分的にテキストのスタイルを変化させたい場合は、TextSpanのchildrenに複数のTextSpanを設定することで実現します。
textプロパティに表示するテキストを設定し、styleプロパティでスタイルを設定します。
その他のプロパティとして、recognizerがあります。
recognizerには、テキストをタップするなどのジェスチャーに対する処理を設定します。
例えばタップした時の処理は、TapGestureRecognizer()を使用します。
以下の場合、タップするとコンソールにTap Text!!と表示されます。
RichText(
text: TextSpan(
text: 'タップしてください',
recognizer: TapGestureRecognizer()
..onTap = () => print("Tap Text!!"),
),
)その他に、ダブルタップした時の処理としてDoubleTapGestureRecognizer()や、長押しした場合の処理としてLongPressGestureRecognizer()などがあります。
RichText(
text: TextSpan(
text: 'ダブルタップしてください',
recognizer: DoubleTapGestureRecognizer()
..onDoubleTap = () => print("Double Tap Text!!"),
),
)RichText(
text: TextSpan(
text: '長押ししてください',
recognizer: LongPressGestureRecognizer(
duration: Duration(seconds: 5),
)..onLongPress = () => print("Long Press Text!!"),
),
)LongPressGestureRecognizerは、durationプロパティを設定することで何秒間押し続けたら実行するという設定ができます。
Text.rich
実は、TextRichはText.richで代用することができます。
Text.rich(
TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text: 'はじめての',
),
TextSpan(
text: 'RichText',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
TextSpan(
text: 'です',
),
],
),
)大きく変わりはありませんが、textプロパティが不要な分、Text.richの方が使いやすい気がします。
DefaultTextStyle
DefaultTextStyleは、すべての子以下のウィジェットのテキストスタイルを設定するために使用します。
DefaultTextStyle(
style: TextStyle(
color: Colors.red,
fontSize: 20,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('A'),
Text('B'),
Text('C'),
],
),
)A
B
C
DefaultTextStyleは入れ子にする場合、そのまま設定すると先に設定したスタイルが適用されなくなります。
DefaultTextStyle(
style: TextStyle(
color: Colors.red,
fontSize: 20,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("A"), Text("B"), Text("C")],
),
DefaultTextStyle(
style: TextStyle(
backgroundColor: Colors.blue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("A"), Text("B"), Text("C")],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("A"), Text("B"), Text("C")],
),
],
),
)A
B
C
A
B
C
A
B
C
先に設定しているスタイルも適用したい場合は、merge()を使用します。
DefaultTextStyle(
style: TextStyle(
color: Colors.red,
fontSize: 20,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("A"), Text("B"), Text("C")],
),
DefaultTextStyle.merge( //←
style: TextStyle(
backgroundColor: Colors.blue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("A"), Text("B"), Text("C")],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("A"), Text("B"), Text("C")],
),
],
),
)A
B
C
A
B
C
A
B
C