easy_rich_text 0.4.1 copy "easy_rich_text: ^0.4.1" to clipboard
easy_rich_text: ^0.4.1 copied to clipboard

outdated

The EasyRichText widget provides a easy way to use RichText when you want to use specific style for specific word.

easy_rich_text #

The EasyRichText widget makes the RichText widget easy. You do not have to split the string manually.

This widget use regular expression to split the string based on the patterns defined in the list of EasyRichTextPattern.

The EasyRichTextPattern is a class defines the text pattern you want to format. By default matchWordBoundaries:true is set to match the whole word. If you want to match substring in a word, set matchWordBoundaries:false

This widget would be useful when you want to apply RichText to text got from a query.

Getting Started #

Installing: #

dependencies:
  easy_rich_text: '^0.4.1'

Examples: #

Simple Example | Trademark Example | Default Style | Conditional Match | Superscript and Subscript | Case Sensitivity | Selectable Text | Regular Expression | Url Launcher | GestureRecognizer | All RichText Properties

Simple Example:

alt text

EasyRichText(
  "I want blue font. I want bold font. I want italic font.",
  patternList: [
    EasyRichTextPattern(
      targetString: 'blue',
      style: TextStyle(color: Colors.blue),
    ),
    EasyRichTextPattern(
      targetString: 'bold',
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    EasyRichTextPattern(
      targetString: 'italic',
      style: TextStyle(fontStyle: FontStyle.italic),
    ),
  ],
),

Trademark Example

alt text

EasyRichText(
  "ProductTM is a superscript trademark symbol. This TM is not a trademark.",
  patternList: [
    EasyRichTextPattern(
      targetString: 'TM',
      superScript: true,
      stringBeforeTarget: 'Product',
      matchWordBoundaries: false,
      style: TextStyle(color: Colors.blue),
    ),
  ],
),

Default Style:

alt text

EasyRichText(
  "This is a EasyRichText example with default grey font. I want blue font here.",
  defaultStyle: TextStyle(color: Colors.grey),
  patternList: [
    EasyRichTextPattern(
      targetString: 'blue',
      style: TextStyle(color: Colors.blue),
    ),
    EasyRichTextPattern(
      targetString: 'bold',
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
  ],
),

Conditional Match

alt text

EasyRichText(
  "I want blue color here. I want no blue font here. I want blue invalid here.",
  patternList: [
    EasyRichTextPattern(
      targetString: 'blue',
      stringBeforeTarget: 'want',
      stringAfterTarget: "color",
      style: TextStyle(color: Colors.blue),
    ),
  ],
),

Superscript and Subscript.

alt text

EasyRichText(
  "I want superscript font here. I want subscript here",
  patternList: [
    EasyRichTextPattern(
        targetString: 'superscript', superScript: true),
    EasyRichTextPattern(
        targetString: 'subscript', subScript: true),
  ],
),

Case Sensitivity

alt text

EasyRichText(
  "Case-Insensitive String Matching. I want both Blue and blue. This paragraph is selectable.",
  caseSensitive: false,
  selectable: true,
  patternList: [
    EasyRichTextPattern(
      targetString: 'Blue',
      style: TextStyle(color: Colors.blue),
    ),
  ],
),

Selectable Text

alt text

EasyRichText(
  "This paragraph is selectable...",
  selectable: true,
),

Regular Expression

alt text

EasyRichText(
  "Regular Expression. I want blue bluea blue1 but not blueA",
  patternList: [
    EasyRichTextPattern(
      targetString: 'bl[a-z0-9]*',
      style: TextStyle(color: Colors.blue),
    ),
  ],
),

Url Launcher

Integrated with url_launcher. Web url, email url, and telephone url are supported. Set urlType : 'web', 'email', or 'tel'. EasyRichText provides regular expression formula to match common urls.

alt text

EasyRichText(
  "Here is a website https://pub.dev/packages/easy_rich_text. Here is a email address test@example.com. Here is a telephone number +852 12345678.",
  patternList: [
    EasyRichTextPattern(
      targetString: 'https://pub.dev/packages/easy_rich_text',
      urlType: 'web',
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
    EasyRichTextPattern(
      targetString: EasyRegexPattern.emailPattern,
      urlType: 'email',
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
    EasyRichTextPattern(
      targetString: EasyRegexPattern.webPattern,
      urlType: 'web',
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
    EasyRichTextPattern(
      targetString: EasyRegexPattern.telPattern,
      urlType: 'tel',
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
  ],
),

GestureRecognizer

///GestureRecognizer, not working when superscript, subscript, or urlType is set.
///TapGestureRecognizer, MultiTapGestureRecognizer, etc.
EasyRichText(
  "Tap recognizer to print this sentence.",
  patternList: [
    EasyRichTextPattern(
      targetString: 'recognizer',
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          print("Tap recognizer to print this sentence.");
        },
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
  ],
),

All RichText Properties

alt text

EasyRichText(
  "TextOverflow.ellipsis, TextAlign.justify, maxLines: 1. TextOverflow.ellipsis, TextAlign.justify, maxLines: 1.",
  textAlign: TextAlign.justify,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
),

Known issues #

Conflict when one target string is included in another target string

alt text

EasyRichText(
  "This is a EasyRichText example. I want whole sentence blue. I want whole sentence bold.",
  patternList: [
    EasyRichTextPattern(
      targetString: 'I want whole sentence blue',
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
    EasyRichTextPattern(
      targetString: 'blue',
      style: TextStyle(color: Colors.blue),
    ),
    EasyRichTextPattern(
      targetString: 'I want whole sentence bold',
      style: TextStyle(fontWeight: FontWeight.bold),
    ),
  ],
),

If you find EasyRichText makes RichText easy, I would appreciate it if you can give me a star on Github and a like on pub.dev

197
likes
0
pub points
96%
popularity

Publisher

verified publisherhyclovechj.com

The EasyRichText widget provides a easy way to use RichText when you want to use specific style for specific word.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter, url_launcher

More

Packages that depend on easy_rich_text