flutterのテキスト折り返し方法について

Question

実現したいこと

初めてflutterを触ってますが、テキストの折り返しがうまくできません。
下記のコードで実装しておりますが、テキストが見切れていエラーが出てしまいます。
maxLinesとoverflowを指定しますが、こちらの原因がわかりません。
どうかわかりますでしょうか。。。。

発生している問題・エラーメッセージ

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 704 pixels on the right.
The relevant error-causing widget was
Row

該当のソースコード

child: Row(
          children: [
            Expanded(
              child: Container(
                height: 150,
                decoration: BoxDecoration(color: Colors.yellow, border: Border.all(color: Colors.black, width: 0.5)),
                child: Row(
                  children: [
                    Container(
                      margin: const EdgeInsets.all(10),
                      width: 150,
                      height: 150,
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.black, width: 0.5),
                      ),
                    ),
                    // TODO: 折り返す処理を加える
                    const Text(
                      "testtesttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttest",
                      style: TextStyle(fontSize: 20),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),

Answer 1

TextをExpandedでラッピングする。

                  const Expanded(
                    child: Text(
                      "testtesttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttestttest",
                      style: TextStyle(fontSize: 20),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),

実行環境不明ですが、VSCodeでデバッグ実行するとデバッグコンソールに問題に関する詳細のメッセージが出ます。
そこに原因と対策が示されています。

なんとなく意訳すると以下の様な感じです。

• 原因
  Rowの中にTextが平置きされているので、とりあえずTextの横幅はText自身に決めさせている。
  Textはその文字を表示するため横幅いっぱいまで伸ばした。
  そしてRowの中に配置しようとしたら、表示エリアからはみ出してしまった。

• 対策
  TextをExpandedなどの親(Row)の大きさ基準のサイズ決定をするウィジェットの子供にする。
  もしくはClipRectなどでクリッピングする。

Comments

[退会済みユーザー]

ご回答ありがとうございます。

ご回答いただき、ありがとうございます。
※エラー文について、再度修正しました。

デバックコンソール上では、７行目のRowがエラーと表示されています。
上記の参考コードについては、TextをExpandedで囲った際でも見切れてしまいますが、
Text自身の幅を指定した方がいいんでしょうか？

[ta.fu]

overflow: TextOverflow.ellipsisの設定をしているので、Textの文字列がTextウィジェットのmaxLinesと横幅から計算される表示領域内に納めることが出来ない場合、納められない文字部分については「...」と以降省略的な文字列に置換されて表示されるのは、仕様です。

物理的な表示領域が広大なのであれば、Textの高さや幅を大きくしまたmaxLinesも大きくすることで、指定された文字列をすべて表示させるということもできると思いますが、実際の表示領域というのは制限があることが普通です。

そういう意味で、Textの表示の仕様を踏まえ、指定されている文字列をどのようにTextの表示領域に納めるようにするのか決めるのはあなた自身です。

今回のようなものは、想定する表示領域に納めることが出来ない文字列が指定される可能性がある場合には、その終端が「...」となるellipsis指定をするのは妥当だと、自分ではそう判断します。

後「見切れる」と文章で書かれていますが、UI系の質問は、要求する表示と実際の表示をキャプチャなどで提示するのが良いです。人によりその文章から受け取るニュアンスが異なる場合が結構あるので。

今回のコメントも、わざわざellipsisとパラメータで指定しているのに、「見切れる」と書いて仕様通りではないような意味合いで書かれていたように思い、終端が「...」になっている状態以外なことが起こっているのではないかと感じてしまいました。続きを読む ∨

[退会済みユーザー]

ご回答、ご指摘ありがとうございます！