如何处理 ListTile flutter 内的右溢出

Question

I have listTile to show title and subtitle... here is the code

ListTile(
              leading: InkWell(
                onTap: () {},
                child: Icon(Icons.fingerprint),
              ),
              title: Text("name xxx"),
              subtitle: 
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        "xxxxxxxx",
                      ),
                      Text(
                        ' - ',
                        style: TextStyle(
                          fontSize: 10.0,
                        ),
                      ),
                      Text(
                        "yyyyyyyyyy",
                        style: TextStyle(
                          fontSize: 10.0,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              trailing: ...
            )

when I replace xxxxxx and yyyyyyy with long sentences... I got right overflowed by 69 pixels so, is there a way to show my long subtitle and to prevent this problem

Answer 1

You have lots of potential solutions to your problem, i can suggest you two simple options:

Option 1

If you absolutely need to show all the content of the two Text widget, you can wrap them inside a Wrap , rather than in a Row :

ListTile(
  leading: InkWell(
    onTap: () {},
    child: Icon(Icons.fingerprint),
  ),
  title: Text("name xxx"),
  subtitle: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Wrap(
        children: [
          Text(
            "long text yeah long text long long and very long",
          ),
          Text(
            ' - ',
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
          Text(
            "Another quite long stuff, it's veeery long and by no means short",
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
        ],
      ),
    ],
  ),
),

Option 2

If you need your Row, with all its children, to stay within a single line of text, you can wrap your Text widgets with a Flexible and instruct them to handle a potential overflow (maybe with an ellipsis):

ListTile(
  leading: InkWell(
    onTap: () {},
    child: Icon(Icons.fingerprint),
  ),
  title: Text("name xxx"),
  subtitle: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          Flexible(
            child: Text(
              "long text yeah long text long long and very long",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Text(
            ' - ',
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
          Flexible(
            child: Text(
              "Another quite long stuff, it's veeery long and by no means short",
              style: TextStyle(
                fontSize: 10.0,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    ],
  ),
),

Answer 2

Wrap the Text widget with an Expanded widget:

                    children: [
                      const Expanded(child:
                      Text(
                        "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                          textAlign: TextAlign.justify,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Text(
                        ' - ',
                        style: TextStyle(
                          fontSize: 10.0,
                        ),
                      ),
                      const Expanded(child:
                      Text(
                        "yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy",
                          textAlign: TextAlign.justify,
                          overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 10.0,
                          ),
                        ),
                      ),
                    ],

https://api.flutter.dev/flutter/widgets/Expanded-class.html