🧵
Flutterで文字を表示させる
はじめに
仕事でFlutterの学習をする必要がでてきたので、アウトプットもかねて、勉強したことをまとめようと思います。今回は文字表示に関してまとめようと思います。文字表示にはText Widgetを使います。
Text Widgetとは
テキストを表示させるために使うWidgetです。styleなどのプロパティを使用することに配置や色、文字の大きさなどを変更することができます。今回はstyleとoverflowプロパティの使用方法を説明します。
style
・ デフォルト
Text('デフォルト'),
・ 太さの指定
Text('太さの指定',
style: TextStyle(fontWeight: FontWeight.bold),
),
・ 色の指定
Text('色の指定',
style: TextStyle(color: Colors.red),
),
・ サイズの指定
Text('サイズの指定',
style: TextStyle(fontSize: 30),
),
・ 表示位置の指定
Text('表示位置の指定',
textAlign: TextAlign.left
),
上のコードに関しては以下の図のようになります。
TextOverflow
TextOverflowメソッドは文字が溢れた時にどのように扱うか決めるために使うものです。以下に具体的な使用例を挙げておきます。
Container(
width: 200,
child: Text('文字列のあふれた部分を省略記号であらわす。',
style: TextStyle(fontSize: 30),
overflow: TextOverflow.ellipsis,
),
),
Container(
width: 200,
child: Text('文字列のあふれた部分を切り取る。',
style: TextStyle(fontSize: 30),
softWrap: false,
overflow: TextOverflow.clip
),
),
Container(
width: 200,
child: Text('文字列のあふれた部分を表示する。',
style: TextStyle(fontSize: 30),
softWrap: false,
overflow: TextOverflow.visible,
),
),
補足をします。softWrapは文字列がはみ出す時に改行するかどうかを決めるプロパティです。今回は文字列がはみ出す時にどのような挙動になるか確認したいので、falseにしておきます。
上のコードは以下のようになります。
おわりに
今回は文字の表示に関してまとめました。やはり実際に触ってみると理解が深まるのでいいですね。今回はよく使いそうなものをまとめているので、気になる方は公式ドキュメントの方を見てみてください。最後まで読んでいただきありがとうございました。
参考文献
Discussion