juejin´╝Ühttps://juejin.cn/post/7283749823428214821

multi_highlight_text

Used to achieve multiple styles of text highlighting, including cross highlighting

Example

Simple display

Content error correction display

Features

  • multiple highlight styles
  • highlight style crossing
  • custom cross style
  • supports both words and positions
  • custom decoration of highlight text

Usage

Simple

MultiHighLightText(
    text: chText,
    textStyle: _textStyle,
    highlights: [
      HighlightItem(
          text: "xxx",
          textStyle: _textStyle.copyWith(color: Colors.green)),
      HighlightItem(
          text: "xxx",
          textStyle: _textStyle.copyWith(color: Colors.yellow)),
      HighlightItem(
          range: const TextRange(start: 0, end: 1),
          textStyle: _textStyle.copyWith(color: Colors.red)),
    ],
)

Custom

MultiHighLightText(
    text: chText,
    textStyle: _textStyle,
    highlights: [
      HighlightItem(
          text: "xxx",
          textStyle: _textStyle.copyWith(color: Colors.green)),
      HighlightItem(
          text: "xxx",
          textStyle: _textStyle.copyWith(color: Colors.yellow)),
      HighlightItem(
          range: const TextRange(start: 0, end: 1),
          textStyle: _textStyle.copyWith(color: Colors.red)),
    ],
    onMixStyleBuilder: _onMixCorrectErrorTextStyleBuilder, // custom cross style
    onDecorateTextSpanBuilder: _onDecorateBuilder, // decorate the collection of the final textspan
)

Existing providers

name description
text The text you want to show
textStyle The text style
highlights List with the word you need to highlight
onMixStyleBuilder The builder of custom cross highlight style
onDecorateTextSpanBuilder The builder of decorate the textSpans

Other

If it helps you, please give me a star, thank you.

Currently, the library supports the above functions. If you have other requirements or bugs, please raise an issue and I will try our best to help everyone solve it.