LoginSignup
0

More than 3 years have passed since last update.

posted at

updated at

RowからTextがあふれないようにする

RowからTextが溢れる。
すごく簡単な話だったわけで、しょーもないことではまった。

問題

Rowの中に親のサイズ以上になるTextを含めると、横に溢れる。

解決

解決っていうか自分への戒め。。

試したこと

String get longString => '<長いテキスト>';
...
Column(
  children: <Widget>[
    Text(
      longString,
      maxLines: 1,
    ),
    SizedBox(height: 8,),
    Row(
      children: <Widget>[
        Text(
          longString,
          maxLines: 1,
        ),
      ],
    ),
  ],
)

結果・・・

Flexibleで囲めば問題なし。

Row(
  children: <Widget>[
    Flexible(
      child: Text(
        longString,
        maxLines: 1,
      ),
    ),
  ],
),

RowとかColumnで mainAxisAlignment を指定したとしても

  • MainAxisAlignment.min は子要素のサイズに合わせた場合はRow/Columnのサイズが変化
  • MainAxisAlignment.max は子要素のサイズによらず、Row/Columnが広がることができるサイズ(=親のサイズ)に合わせる

という挙動(仕組みは知らない)。なので mainAxisAlignment は解決にならないことは把握していた。

flutter.devのページを見て、あーなるほどねえ、みたいな理解はした。(深くは調べていないので、余計な意訳を書いても・・・と思ったので省略)

YouTubeのFlutter Widget of the Weekは毎日でも見た方がいいね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0