Dart

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

iOSでいうところのUILabelnumberOfLines プロパティみたいな設定を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点リーダーが表示されます。

それでは、バイバイ。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。