Flutter – Wrap text on overflow, like insert ellipsis or fade

In Flutter, you can wrap text on overflow by using the Text widget along with the TextOverflow property. You can use the TextOverflow.ellipsis or TextOverflow.fade properties to insert an ellipsis or fade out the text, respectively, when the text overflows the available space.

Here’s an example of using TextOverflow.ellipsis:

Text(
  "This is a long text that will overflow the available space",
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
),

And here’s an example of using TextOverflow.fade:

Text(
  "This is a long text that will overflow the available space",
  overflow: TextOverflow.fade,
  maxLines: 1,
),

In both examples, the maxLines property is set to 1, which means that the text will be displayed on a single line. If the text overflows the available space, it will be truncated with an ellipsis or fade out, depending on the value of the TextOverflow property.