0

I am working on an app with a chat feature that shows messages in a ListView. The size of each "message" depends on the amount of text in that particular message.

I would like to put a limit on the number of lines, say 10 lines max. If a particular message happens to take up more than the limit, the text should be truncated near the end of the 10th line and a "FlatButton" with the text 'more...' be provided, which allows the user to open up that message to see all the text. For messages that fit, this button will not be shown.

The part I am struggling with is being able to truncate the text at the right point.

Currently I am thinking that guessing the number of lines a message might take up based on the number of characters and the font size would be the best approach, with the limitation that sometimes it might be off by a couple of lines. That is probably acceptable in this application.

As a bonus I also would like to render the "more..." button "inline" at the end of the text, but that is probably a separate question.

The Tahaan
  • 6,915
  • 4
  • 34
  • 54

1 Answers1

0

Did you try the maxLines property of Text widget? This in combination with overflow should solve your problem.


Reference

maxLine property
overflow property

Community
  • 1
  • 1
Amsakanna
  • 12,254
  • 8
  • 46
  • 58
  • That would allow the Widget to "clip" or even show Ellipses. How can it help to indicate that a "more" button should be rendered? – The Tahaan Aug 29 '19 at 15:32
  • Did you check this out? https://stackoverflow.com/questions/51114778/how-to-check-if-flutter-text-widget-was-overflowed – Amsakanna Aug 29 '19 at 15:38
  • Hackish and I would need to see how it works with Emoji and different fonts and sizes. It might provide a solution but seemsI would need to know at least the widget width as well. – The Tahaan Aug 29 '19 at 15:43