expandable_richtext 1.0.6 copy "expandable_richtext: ^1.0.6" to clipboard
expandable_richtext: ^1.0.6 copied to clipboard

A text widget which you can use to initially only show a defined number of lines of a probably long text. it also support clickable @‌mention,

Expandable RichText #

pub package license

A text widget that you can use to initially only show a defined number of lines of a probably long text. It also supports clickable @‌mention, #hashtag, and hyperlinks. You can define styles for @‌mention, #hashtag, and hyperlinks and apply custom styles on text segments.

Features #

  • Collapse and Expand text
  • Configure text to show to Expand text (expandText) and to Collapse text (collapseText)
  • Control whether the ellipsis (showEllipsis) is part of the Expand/Collapse text
  • Expand and Collapse animation
  • Callback for expanded changed event (onExpandedChanged)
  • Apply different style at @‌mention, #hashtag, hyperlinks and text segments
  • Handle click on @‌mention, #hashtag, hyperlinks and text segments
  • Programmatically expand and collapse text

Example with maxLines=1

Getting started #

Add this to your package's pubspec.yaml file:

dependencies:
  expandable_richtext: 1.0.6

Next, import the package into your dart code:

import 'package:expandable_rich_text/expandable_richtext.dart';

Usage #

If text exceeds two lines:

Widget build(BuildContext context) {
  return ExpandableRichText(
    text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    expandText: 'show more',
    collapseText: 'show less',
    maxLines: 2,
    linkColor: Colors.blue,
  );
}

If text have @‌mention, #hashtag, hyperlinks and text segments:

Widget build(BuildContext context) {
  return ExpandableRichText(
      "Lorem ipsum dolor sit amet..., #consetetur @sadipscing elitr, <tag1>I am Admin1</tag1> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <tag2>I am employee1</tag2> At vero eos et accusam et justo duo dolores et ea rebum Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum www.galley.com dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <tag1>I am Admin2</tag1> diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <tag2>I am employee2</tag2> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      expandText: 'show more',
      collapseText: 'show less',
      maxLines: 1,
      linkColor: Colors.blue,
      mentionStyle: const TextStyle(
          color: Colors.blueAccent, fontSize: 16, fontWeight: FontWeight.bold),
      hashtagStyle: const TextStyle(
          fontSize: 16, color: Colors.white, backgroundColor: Colors.black87),
      urlStyle: const TextStyle(
          color: Colors.lightBlueAccent, decoration: TextDecoration.underline),
      customTagStyle: const TextStyle(fontWeight: FontWeight.bold,
          fontStyle: FontStyle.italic,
          fontSize: 16,
          color: Colors.white,
          backgroundColor: Colors.lightBlueAccent,
          decoration: TextDecoration.underline)
  );
}

Advance Usage #

Widget build(BuildContext context) {
  return ExpandableRichText(
    "Lorem ipsum dolor sit amet..., #consetetur @sadipscing elitr, <tag1>I am Admin1</tag1> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <tag2>I am employee1</tag2> At vero eos et accusam et justo duo dolores et ea rebum Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum www.galley.com dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <tag1>I am Admin2</tag1> diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <tag2>I am employee2</tag2> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
    expandText: 'show more',
    collapseText: 'show less',
    expanded: false,
    onExpandedChanged: (flag) => {},
    toggleTextColor: Colors.black,
    showEllipsis: true,
    toggleTextStyle: const TextStyle(
        fontSize: 12, color: Colors.blue, decoration: TextDecoration.underline),
    urlStyle: const TextStyle(color: Colors.lightBlueAccent, decoration: TextDecoration.underline),
    onUrlTap: (url) => {},
    hashtagStyle: const TextStyle(
        fontSize: 16, color: Colors.white, backgroundColor: Colors.black87),
    mentionStyle: const TextStyle(
        color: Colors.blueAccent, fontSize: 16, fontWeight: FontWeight.bold),
    onMentionTap: (mention) => {},
    customTagStyle: const TextStyle(fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        fontSize: 16,
        color: Colors.white,
        backgroundColor: Colors.lightBlueAccent,
        decoration: TextDecoration.underline),
    onCustomTagTap: (tag) => {},
    expandOnTextTap: true,
    collapseOnTextTap: true,
    style: const TextStyle(color: Colors.black, fontSize: 24),
    textDirection: TextDirection.ltr,
    textAlign: TextAlign.start,
    textScaleFactor: 1.0,
    maxLines: 2,
    animation: true,
    animationDuration: const Duration(milliseconds: 200),
    animationCurve: Curves.fastLinearToSlowEaseIn,
  );
}

Bugs and feature requests #

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Author #

DevCrew I/O

Connect with Us:

devcrew.io mycompany devcrew.io devcrew.io DevCrew-io

Contributing #

Contributions, issues, and feature requests are welcome!

Show your Support #

Give a star if this project helped you.

Code copyright 2023 DevCrew I/O. Code released under the MIT license.

11
likes
130
pub points
83%
popularity

Publisher

verified publisherdevcrew.io

A text widget which you can use to initially only show a defined number of lines of a probably long text. it also support clickable @‌mention,

Homepage
Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on expandable_richtext