The EasyRichText widget provides an easy way to use RichText.

Overview

easy_rich_text

pub package GitHub license GitHub stars

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

This widget use regular expression to effectively 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.

targetString can be a String or a List<String>.

By default matchWordBoundaries:true is set to match the whole word. If you want to match substring in a word, set matchWordBoundaries:false

GestureRecognizer and url_launcher are integrated.

If you find this package useful, I would appreciate it if you can give me a star on Github or a like on pub.dev

Getting Started

Installing:

dependencies:
  easy_rich_text: '^1.0.1'

Examples:

Simple Example | Trademark Example | Default Style | Conditional Match | Match Option | Superscript and Subscript | Case Sensitivity | Selectable Text | Regular Expression | Url Launcher | GestureRecognizer | All RichText Properties | Special Characters | WhatsApp Like Text Formatter

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),
    ),
  ],
),

Match Option

alt text

matchOption can be a string or a list. default is 'all'.
string: 'all', 'first', 'last'
List:'first', 'last', and any integer index
For example, [0, 1, 'last'] will match the first, second, and last one.
EasyRichText(
  "blue 1, blue 2, blue 3, blue 4, blue 5",
  patternList: [
    EasyRichTextPattern(
      targetString: 'blue',
      //matchOption: 'all'
      matchOption: [0, 1, 'last'],
      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 [email protected]. 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,
),

Special Characters

alt text

//if the targetString contains the following special characters \[]()^*+?
EasyRichText(
  "Received 88+ messages. Received 99+ messages",
  patternList: [
    //set hasSpecialCharacters to true
    EasyRichTextPattern(
      targetString: '99+',
      hasSpecialCharacters: true,
      style: TextStyle(color: Colors.blue),
    ),
    //or if you are familiar with regular expressions, then use \\ to skip it
    EasyRichTextPattern(
      targetString: '88\\+',
      style: TextStyle(color: Colors.blue),
    ),
  ],
),

WhatsApp Like Text Formatter

alt text

///WhatsApp like text formatter
EasyRichText(
  "TEST *bold font*. test *boldfont*.",
  patternList: [
    ///bold font
    EasyRichTextPattern(
      targetString: '(\\*)(.*?)(\\*)',
      matchBuilder: (BuildContext context, RegExpMatch match) {
        return TextSpan(
          text: match[0].replaceAll('*', ''),
          style: TextStyle(fontWeight: FontWeight.bold),
        );
      },
    ),
  ],
),

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),
    ),
  ],
),
Comments
  • Need help with making WhatsApp like formatting / italic / bold / underline

    Need help with making WhatsApp like formatting / italic / bold / underline

    im trying to get bold and italic and underline formatting like WhatsApp and im using the following but im getting no result

    patternList: [ ///bold font EasyRichTextPattern( targetString: '()(.?)()', matchBuilder: (BuildContext context, RegExpMatch match) { print(match[0]); return TextSpan( text: match[0].replaceAll('', ''), style: TextStyle(fontWeight: FontWeight.bold), ); }, ),

                          ///italic font
                          EasyRichTextPattern(
                            targetString: '(\_)(.*?)(\_)',
                            matchBuilder:
                                (BuildContext context, RegExpMatch match) {
                              print(match[0]);
                              return TextSpan(
                                text: match[0].replaceAll('_', ''),
                                style:
                                    TextStyle(fontStyle: FontStyle.italic),
                              );
                            },
                          ),
                        ],
    
    Screenshot 2021-10-13 at 13 37 02 the other text turns black idk why when default color is white could you help me out
    opened by officialFlutterDeveloper 13
  • want to use recoginizer with captured string

    want to use recoginizer with captured string

    i want to use recoginizer with captured string.

    now: EasyRichTextPattern( recognizer: TapGestureRecognizer() ..onTap = (){ ... } );

    change to: EasyRichTextPattern( recognizer: (String captured) => TapGestureRecognizer() ..onTap = (){ ... } );

    can do it ?

    opened by ogata-k 8
  • Cannot match Chinese characters

    Cannot match Chinese characters

    19F3C999-90E3-4874-96E9-6F6439E255D6 67559EF4-941D-4B50-AD1B-B4CBD3F95B78

    I'm glad to see the library you published on pub dev, but it is a bit imperfect because it cannot support Chinese characters. Would you fix this bug?

    bug good first issue 
    opened by tasselx 7
  • build error

    build error

    ../../../../Desktop/flutter/.pub-cache/hosted/pub.flutter-io.cn/easy_rich_text-1.0.4/lib/src/easy_rich_text.dart:537:9: Error: No named parameter with the name 'semanticsLabel'.

    opened by xingfukun 6
  • Print onTap string

    Print onTap string

    Suppose I colored some text using regex. Example:

    Text  يَنْصُرُ More text
    
    Text وَاحِدٌ مُذَكَّرٌ غَائِبٌ text يَنْصُرُ text
    

    Here I have colored arabic text. When I tap on these arabic text, it gives me a message by

    recognizer: TapGestureRecognizer()
                            ..onTap = () {
    
                              print("Tap recognizer to print this sentence.");
        },
    

    BUT, is there any way to get the tapped arabic text? Like when tapped on يَنْصُرُ it prints يَنْصُرُ . When وَاحِدٌ مُذَكَّرٌ غَائِبٌ , prints وَاحِدٌ مُذَكَّرٌ غَائِبٌ

    opened by SNNafi 6
  • special characters don't take effect!

    special characters don't take effect!

    I found that after setting hasSpecialCharacters: true, the original matching ordinary characters did not take effect, and the special symbols were not set to the highlighted state.

    opened by Espero1995 5
  • Cannot match Arabic characters

    Cannot match Arabic characters

    6418E045-CAA4-49D2-8A6E-3010BE1A792A

     EasyRichText(
                    "الحياة أكثر من مجرد الحاضر",
                    patternList: [
                      EasyRichTextPattern(
                        targetString: 'من',
                        style: TextStyle(color: Colors.blue),
                      )
                    ],
                    defaultStyle: TextStyle(color: Colors.red),
                  ),
    
    bug 
    opened by tasselx 5
  • When we us special characters in EasyRichText as Target String like ~|[]{}#%^*+=_|<>$£€•.,?!’ it crashes & fires exception.

    When we us special characters in EasyRichText as Target String like ~|[]{}#%^*+=_|<>$£€•.,?!’ it crashes & fires exception.

    @2000calories :

    When we us special characters in EasyRichText as Target String like ~|[]{}#%^*+=_|<>$£€•.,?!’ it crashes & fires below mentioned exception. Please refer screenshot from your example app only.

    ///GestureRecognizer, not working when superscript, subscript, or urlType is set.
                  ///TapGestureRecognizer, MultiTapGestureRecognizer, etc.
                  EasyRichText(
                    "Tap recognizer to print this sentence.~|[]{}#%^*+=_\|<>\$£€•.,?!’",
                    patternList: [
                      EasyRichTextPattern(
                        targetString: '~|[]{}#%^*+=_\|<>\$£€•.,?!’',
                        recognizer: TapGestureRecognizer()
                          ..onTap = () {
                            print("Tap recognizer to print this sentence.");
                          },
                        style: TextStyle(
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ],
                  ),
    

    ════════ Exception caught by widgets library ═══════════════════════════════════ The following FormatException was thrown building EasyRichText(dirty, dependencies: [DefaultTextStyle]): Lone quantifier brackets((?<!\w)~|[]{}#%^*+=_|<>$£€•.,?!’(?!\w))

    Screenshot 2020-10-08 at 3 29 20 PM special character 
    opened by nirajjoshi 4
  • Deselect selectable text when clicking

    Deselect selectable text when clicking

    Just want to say I love the package, it's awesome! One thing I noticed though is that text doesn't deselect. If I have it selected and then I click outside it or on another EasyRichText widget. It would be great if it could deselect to mimic the behavior that's typically expected on the web.

    Let me know if you need any more details.

    opened by caleb654 3
  • a character under text and list string in targetString

    a character under text and list string in targetString

    hi sir, i have 2 questions:

    1. is it possible to use a list for targetString. ex: targetString: ['exposured', 'cen be help', 'working', 'night shift']. because all have same text decoration.
    2. can i put a character under text such as in the image bellow: question
    opened by bang-zoel 3
  • Bug in Safari

    Bug in Safari

    The RegEx for doing pattern matches in easy_rich_text does not work in the Safari browser. Below is the code sample that blows up Safari and I've also attached a screen shot of the error message in the browser.

    `

    Widget instructions() { return Padding( padding: const EdgeInsets.only(left: 0, right: 0), child: EasyRichText( "Below are the menu images that have been uploaded. Select one and then click items.", defaultStyle: instructionStyle, patternList: [ EasyRichTextPattern( targetString: 'items', style: instructionStyle.copyWith(fontWeight: FontWeight.bold), ), ], ), ); }

    `

    Screen Shot 2022-10-07 at 12 02 26 PM

    opened by larryrobinson 2
  • FormatException: Range out of order in character class

    FormatException: Range out of order in character class

    Flutter throwing this exception:

    The following FormatException was thrown building EasyRichText(dirty):
    Range out of order in character class((?<!\w)qu'y a-t-il? [ou qu'est-ce qu'il y a?] ― il y a que j'ai faim!(?!\w))
    
    opened by Alexander-TM 3
  • Apply Styling in nested EasyRichTextPattern

    Apply Styling in nested EasyRichTextPattern

    Welcome, Many Thanks for the Library

    I want to do styling in nested EasyRichTextPattern..

    for Example any text between "" to be red, And {[..]} to be blue even if it found between "..", Check the image:

    image

    iI have this patternList:

    patternList = [ EasyRichTextPattern(targetString: '"(.+?)"', style: TextStyle(color: darkRed)), EasyRichTextPattern(targetString: "(\\{\\[(\.+?)\\]\\})", style: TextStyle(color: primaryGreen)) ]

    enhancement 
    opened by nawaf11 0
  • Handle html as starting text

    Handle html as starting text

    Any plans for having HTML as base text and adding tags on top of that? This would introduce another can of worms, eg matching across tags etc., but there are some nice solutions like https://github.com/padolsey/findAndReplaceDOMText

    EasyRichText(
      "I want <span class="whatever">blue font. I want</span> bold font. I want italic font.",
      patternList: [
        EasyRichTextPattern(
          targetString: 'want blue',
          style: TextStyle(color: Colors.blue),
        ),
        EasyRichTextPattern(
          targetString: 'bold',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        EasyRichTextPattern(
          targetString: 'italic',
          style: TextStyle(fontStyle: FontStyle.italic),
        ),
      ],
    ),
    
    enhancement 
    opened by giorgio79 0
Releases(0.4.2)
Owner
hans.huang
Alway rejoyce
hans.huang
A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

Mohit Chauhan 8 Oct 3, 2022
A package provides an easy way to add shimmer effect in Flutter project

flutter_shimmer_widget A package provides an easy way to add shimmer effect in Flutter project Getting Started Animation Example Project There is a ex

Le Anh Tuan 4 Jun 29, 2022
A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

Ravi Kavaiya 89 Dec 8, 2022
A flutter widget to indicate loading progress. Easy to use, easy to extend

?? ?? ?? A flutter widget to indicate loading progress. Easy to use, easy to extend

Manuel Duarte 2 May 30, 2022
An easy way to use pull-to-refresh.

MJRefresh An easy way to use pull-to-refresh ?? ✍??Release Notes: more details Contents New Features Dynamic i18n Switching SPM Supported Swift Chaini

M了个J 13.7k Dec 29, 2022
An easy way to show a flutter custom popup widget.

flutter_easy_popup An easy way to show a flutter custom popup widget. Screenshot Example Screenshot Dropdown Menu App Operation Guide Multi Highlights

BakerJ 42 Oct 26, 2022
This library provides a customizable Flutter widget that makes it easy to display text in the middle of a Divider.

1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use TextDivider 1.2. Details 1.2.1. Customization Options 1.2.2. Horizontal

Kato Shinya 2 Feb 9, 2022
The easiest way to create your animated splash screen in a fully customizable way.

Animated Splash Screen Check it out at Pub.Dev Do it your way Assets image Custom Widget Url image IconData Or just change PageTransition and/or Splas

Clean Code 104 Nov 10, 2022
MindInventory 15 Sep 5, 2022
changelog.dart provides a library and a command-line application to manage in the correct way the git metadata to build the changelog between two release

changelog.dart ?? changelog.dart: a collection of tools to manages in a fashion way a repository as maintainer. ?? Project Homepage Table of Content I

Vincenzo Palazzo 7 Dec 18, 2022
This library provides the easiest way to integrate Twitter Cards in Flutter web apps 🐦

The Easiest Way to Integrate Twitter Cards into Your Flutter Web App ?? 1. Guide ?? 1.1. Features ?? 1.2. Getting Started ⚡ 1.2.1. Install Library 1.2

Twitter.dart 3 Aug 7, 2022
This library provides the optimized and easiest way to authenticate with Mastodon's OAuth 2.0 in your Flutter app 🎯

The Optimized and Easiest Way to Integrate OAuth 2.0 with Mastodon API in Flutter ?? 1. Guide ?? 1.1. Getting Started ⚡ 1.1.1. Install Library 1.1.2.

Mastodon.dart 11 Jul 7, 2023
A TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

easy_tab_controller A user-friendly TabBarController widget for flutter developer. Getting Started This project is a starting point for a Flutter plug

圆号本昊 3 May 26, 2022
A Flutter package providing an easy way to add floating ribbon to images.

Floating Ribbon A new Flutter package for creating floating ribbons on images. Dependency dependencies: floating_ribbon: any How To Use In order to

101Loop 12 Sep 26, 2022
Lite version of smart_select package, zero dependencies, an easy way to provide a single or multiple choice chips.

Lite version of smart_select package, zero dependencies, an easy way to provide a single or multiple choice chips. What's New in Version 2.x.x Added p

Irfan Vigma Taufik 97 Dec 15, 2022
An easy way to add rounded corner floating app bar in Flutter project.

rounded_floating_app_bar Rounded floating app bar like new google applications has. This package provides an easy way to add rounded corner floating a

Bhavik Makwana 30 Nov 11, 2021
An easy way to add all google ads to your flutter app.

Google Ads An easy way to add all google ads to your flutter app. How to use it Add the google_mobile_ads package using flutter pub add google_mobile_

Yemeni Open Source 4 Sep 27, 2022