How to show multiline text with custom text ending regardless of text overflow?-CodePudding

I have a description text and a date text. I want to show them together on a page. The description text can be as long as 3 lines at max. This is how it should look:

A description text that
can be as long as it can
be but not... * 17 Jan, 2002

In the above example, the description text gets cut because it overflows and shows an ellipsis, but date text is displayed completely. Here are other examples:

A not so long description *
 17 Jan, 2002


A not so long description but 
long enough * 17 Jan, 2002


A not so long description but 
long enough to be called long
* 17 Jan, 2002


A not so long description but 
long enough to be called long 
because it ... * 17 Jan, 2002

I have found an issue on Flutter Github, but I don't know if it will help me anyhow.

Please check the below code
Center(
        child: RichText(
      text: TextSpan(
        text: 'A description text that can be as long as it can be but not ' * 10,
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          TextSpan(
              text: '* 17 Jan, 2002', style: TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    ));
CodePudding user response：

Use your package or use this one: https://pub.dev/packages/readmore

Put your description in main text content, and you can add date as Show More or Show Less prefix. By using this your content will get ellipsis (...) and date will show full as you wanted.

You can do like this:
ReadMoreText(
    'Flutter is Google’s mobile UI open source framework to build high quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
    trimLines: 2,
    colorClickableText: Colors.pink,
    trimMode: TrimMode.Line,
    trimCollapsedText: '17 Jan, 2002. Show more',
    trimExpandedText: '17 Jan, 2002. Show less',
    moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
);
Hope this will help you.

Thanks.