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)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.