Michele Volpato

Michele Volpato

Long text is not displayed correctly when using ellipsis overflow in Flutter

Flutter

I was working with a list of single line Text widgets in Flutter, and I noticed that the text was not displayed properly.

For instance

Text(
    "A very long text_that_is_too_long_for_the_width_of_this_widget",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
)

resulted in something like

A very long...

when the expected result was something like

A very long text_that_is_too_long_for...

There seems to be a bug in Flutter, opened in June 2018, that hopefully will be fixed soon.

As suggested by a contributor I decided to use TextOverflow.fade, instead of using workarounds that will only make the code more complicated, compared to a small change in the design.

Get a weekly email about Flutter

Subscribe to get a weekly curated list of articles and videos about Flutter and Dart.

    We respect your privacy. Unsubscribe at any time.

    Leave a comment