Flutter ListTile 标题溢出问题

Question

I'm displaying a long text inside ListTile's title using the following code and I'm having UI issue with the Text overflow feature:

ListTile(
  contentPadding: const EdgeInsets.symmetric(horizontal: 32.0),
  leading: SizedBox(
    width: 32.0,
    child: Center(
      child: Container(
        width: 32.0,
        height: 32.0,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: HexColor.fromHex(_clientStatusList.first.color)
              .withOpacity(0.2),
          border: Border.all(
              color: HexColor.fromHex(_clientStatusList.first.color)),
        ),
        child: Center(
            child: Icon(
          CustomIcons.customer_important,
          size: 14.0,
          color: HexColor.fromHex(_clientStatusList.first.color),
        )),
      ),
    ),
  ),
  title: Text(
    _clientStatusList.map((e) => e.name).join(", "),
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
  subtitle: Text("Status"),
),

Result from the above code: https://i.stack.imgur.com/O5Euf.png

Result without maxLines and overflow : https://i.stack.imgur.com/VWOpF.png

I guess that the expected result is: https://i.stack.imgur.com/OFMoT.png

Flutter doctor:

[✓] Flutter (Channel stable, v1.17.2, on Mac OS X 10.15.5 19F96, locale en-IL)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.45.1)
[✓] Connected device (1 available)

Answer 1

The documentation fo maxLine says:

If this is 1 (the default), the text will not wrap, but will scroll horizontally instead.

so, the output is right according to widget.

I would suggest link 1 and link 2 to take a look.

NB: You can try with Expanded() Widget, sometimes it is handy to use full empty space.