🔬

FlutterのTextウィジェット maxLines/softWrap/overflowのすべて

2022/11/01に公開

試したのは Flutter 3.3.3

この記事は

FlutterのTextウィジェットのmaxLines/softWrap/overflowの組み合わせの結果を世に知らしめるものである。

overflow の各設定、つまり

  • clip // Clip the overflowing text to fix its container. 範囲外切り取り
  • fade // Fade the overflowing text to transparent. はみ出るなら透明効果を使う
  • ellipsis // Use an ellipsis to indicate that the text has overflowed. 点々を使用
  • visible // Render overflowing text outside of its container. はみ出ても表示

このそれぞれ対して maxLinessoftWrap を色々設定した結果を4x2で表示する。各位置の意味は

softWrap false softWrap true
maxLines 1 & 収まる 結果 結果
maxLines 1 & 収まらない
「〜けこ」
結果 結果
maxLines 2 & 収まる
「〜けこ」
結果 結果
maxLines 2 & 収まらない
「〜せそ」
結果 結果

のとおりである。

TextOverflow.clip

左側の softWrap: false は「き」が欠けている。maxLines の設定は関係ないようである。
右側の softWrap: true は文字単位で折り返す。maxLines による限界が来たら切り捨てる。

TextOverflow.fade

左側の softWrap: false は「き」の文字が消えかかっている。maxLines の設定は関係ないようである。
右側の softWrap: true ははみ出るときに下の方が消えかかっている(よく見ないとわからないが)。この記事を書くきっかけになったのがこの挙動である。複数行表示されているときに一番下の行の下部が文字数オーバー時に消えかかっていても、それは理解できる挙動であるが、1行表示を指定している状態でも下部が消えかかる。これを避けたい場合は softWrap をfalseにするとよい。

TextOverflow.ellipsis

左右同じなので softWrap は関係ない。領域が足りないなら点々を表示する。

TextOverflow.visible

左側の softWrap: false だと1行で勝手にどんどん伸びる。maxLines の設定も関係ないようである。
右側側の softWrap: true は右端で文字単位で折り返す。表示できないところはしない。という処理。

Discussion