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

試したのは 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. はみ出ても表示

このそれぞれ対して maxLinesと softWrap を色々設定した結果を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 は右端で文字単位で折り返す。表示できないところはしない。という処理。