How to use two different packages together on the same data

Issue

I have this two packages which i want to use flutter_linkify and readmore.
linkify turns urls and email in a text into clickable link while readmore cuts long text into shorter one and i want to use both of them in with the same text

String randomText = "DetectableTextField is published as a refinement of this isaackelechi2000@gmail.com package. hashtagale forces you to use hashtag, but this one allows you to detect anything you want. If you also want https://www.google.com to decorate At sign, you can do that by adding the argument decorateAtSign: true. "

//Using linkify
Linkify(
  onOpen: (link) => print("Clicked ${link.url}!"),
  text: randomText,
);

//using readmore
ReadMoreText(
  randomText,
  trimLines: 2,
  colorClickableText: Colors.pink,
  trimMode: TrimMode.Line,
  trimCollapsedText: 'Show more',
  trimExpandedText: 'Show less',
  moreStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
);

So how can i use the both packages with the same text without showing two different text on the same screen

Solution

Unfortunately, since each of these widgets takes a string (rather than a child widget), they cannot be composed with each other.

I think you’re best bet is to use the ExpandablePanel widget, instead of ReadMoreText, and then use Linkify on the child widgets.

Something like this might work (though you’ll probably have to tweak for your exact use case).

ExpandablePanel(
  collapsed: Linkify(article.body, softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis,),
  expanded: Linkify(article.body, softWrap: true, ),
  tapHeaderToExpand: true,
  hasIcon: true,
);

Answered By – Michael Horn

Answer Checked By – Marilyn (FlutterFixes Volunteer)