49. FlutterでTextの行数を指定する方法

iOSでいうところのUILabelのnumberOfLines プロパティみたいな設定をFlutterではどうやって実現するかの話しです。

結論からいうとmaxLinesを使えばよい。

/// label の文字を3行まで表示できる
label.numberOfLines = 3

/// ああああああああああああああああ、がWidgetの幅に収まらない場合は自動的に3行折り返して表示される
Text("ああああああああああああああああ",
                  maxLines: 3,
              )

上は最大3行まで表示できるように設定します。

さらにアプリ開発でよくある仕様として語尾に3点リーダーをつけたい時はoverflowを使えば実現できます。
overflowにはTextOverflow.ellipsisを指定しましょう！

Text("ああああああああああああああああ",
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis
              )

これでWidgetに文字が収まらない場合は語尾に3点リーダーが表示されます。

それでは、バイバイ。

Tamappe

モバイルアプリエンジニア

XContact

都内の会社で働いているモバイルアプリエンジニアのTamappeです。今はiOSとAndroidの両OSを開発しています。使用言語はSwift/Objective-C/Java/Kotlin/Dartです。趣味はポーカーとスプラトゥーン2。最近は、シミュレーションゲームもやっています。