Extended Text for applying ellipses in middle for text widget

Question

I have a Text widget with styling and decoration. Currently I can make the overflow text as ellipses at end. But I want to add ellipses in the middle. I found this library extended_text. But this takes a widget by default and then a child widget in the overflowWidget. How am I supposed to use it properly? Can someone help me out?

Text(text, overflow: textOverflow, style: style.copyWith( color: color, fontWeight: fontWeight, decoration: underlined ? TextDecoration.underline : null));

I have to convert the above widget into extended widget.

Answer 1

Based on the example of extended_text, you can easily convert your current Text widget into ExtendedText using the following example.

ExtendedText(
  'This is a very loooooooooooooooooooongggggggggggggggggggggggggggggggggggggggggggg text',
  maxLines: 1,
  style: TextStyle(                // <<Your current text style go here
      color: Colors.black,
      fontWeight: FontWeight.w400,
      decoration: TextDecoration.underline
  ),
  overflowWidget: TextOverflowWidget(
    position: TextOverflowPosition.middle, //   << start/middle/end
    child: Text(
      ".....",
      style: TextStyle(
        color: Colors.black,
        fontWeight: FontWeight.w400,
        decoration: TextDecoration.underline
      ),
    ),
  ),
)

TextOverflowPosition.middle


TextOverflowPosition.start


TextOverflowPosition.end