套件詳情v2.2.0

easy_rich_text

EasyRichText 小部件提供了一種使用 RichText 的簡單方式。您不必手動拆分字串。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 3.2萬
喜歡數: 250
Pub 分數: 130

安裝套件

flutter pub add easy_rich_text

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

EasyRichText 透過自動處理文字分割與樣式，簡化了 Flutter 中 RichText 的使用，無需手動拆分字串。它允許開發者使用簡單語法，在單一文字字串中直接套用不同樣式、顏色與元件。適用於顯示混合樣式的格式化文字，例如連結、提及或表情符號，可減少重複程式碼並提升可讀性。此套件支援所有主要平台，包含行動裝置、網頁與桌面端。

適用情境

顯示帶有混合格式的樣式文字
建立具有嵌入連結的豐富文字
在文字中強調關鍵字
使用樣式渲染使用者產生的內容
在格式化文字中添加表情符號

主要特色

自動文字分割
支援內嵌樣式
簡潔語法，用於複雜格式化
跨平台相容性
最小化樣板程式碼

適合對象

尋求簡單富文本渲染的開發者
包含動態或使用者產生內容的應用程式
聊天或訊息介面
具有格式化文字的文件或幫助系統

使用建議

與完整 RichText 相比，樣式功能有限
處理非常大的文字時可能會影響效能
需要仔細處理嵌套小部件
不太適合高度複雜的佈局
依賴外部庫的更新以取得新功能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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 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 and a like on pub.dev

Getting Started

Installing:

dependencies:
  easy_rich_text: '^2.0.0'

Examples:

Simple Example:

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

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:

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

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

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.

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

Case Sensitivity

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

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

Regular Expression

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.

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

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

Special Characters

//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

///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: const TextStyle(fontWeight: FontWeight.bold),
        );
      },
    ),
  ],
),

prefixInlineSpan & suffixInlineSpan

///add icon before/after targetString
EasyRichText(
  "Please contact us at +123456789",
  patternList: [
    EasyRichTextPattern(
      targetString: EasyRegexPattern.telPattern,
      prefixInlineSpan: WidgetSpan(
        child: Icon(Icons.local_phone),
      ),
      suffixInlineSpan: WidgetSpan(
        child: Icon(Icons.local_phone),
      ),
    )
  ],
),

所屬分類

表情符號和富文本

依賴

依賴清單 1 項

url_launcher^6.0.2

原始碼儲存庫

2000calories/flutter_easy_rich_text

flutter_easy_rich_text

☆ 83 星標⑂ 30 分支

DartC++richtextregular-expressionflutter

使用此套件的專案

archethic-foundation/archethic-wallet

archethic-wallet

☆ 68 星標⑂ 31 分支

DartC++archethicwalletblockchain