marked_text 0.0.6 copy "marked_text: ^0.0.6" to clipboard
marked_text: ^0.0.6 copied to clipboard

Interpret text by marking certain sections with specified tokens, allowing for custom callbacks and styling

Handle text spans like a pro #

Features #

marked_text allows to mark certain sections of text in order to render them differently and attach behaviors with the GestureRecognizer

Building #

Since the package allows to dynamically obtain icons based on their id with the Mark.icon(), when building the Flutter application the flag --no-tree-shake-icons must be provided.

Getting started #

Set default options #

MarkedText.setDefaults({
      // Make all icons text by default orange
      "icon": MarkOptions(
        styleBuilder: (context, text, payload, defaultStyle) => defaultStyle?.copyWith(color: Colors.orange),
      ),
      // Make italic text opaque, remember to set it to italic
      "i": MarkOptions(
        styleBuilder: (context, text, payload, defaultStyle) => defaultStyle?.copyWith(color: Colors.black54, fontStyle: FontStyle.italic),
      ),
      // Make bold text bigger, remember to set it to bold
      "b": MarkOptions(
        styleBuilder: (context, text, payload, defaultStyle) => defaultStyle?.copyWith(fontSize: 20, fontWeight: FontWeight.bold),
      )
});

Render your text #

Define custom marks if needed or use the already implemented one.

MarkedText(
    source: rawStringSource,
    textAlign: TextAlign.start,
    marks: [
    Mark.bold(),
    Mark.italic(),
    Mark.link(),
    Mark.icon(),
    Mark(
        id: "custom",
        options: MarkOptions(
        onTap: (text, payload) => debugPrint("tapped text $text with payload $payload"),
        styleBuilder: (context, text, payload, defaultStyle) =>
            defaultStyle?.copyWith(decoration: TextDecoration.underline, color: Colors.amberAccent),
        ),
    ),
    Mark(
        id: "longpress",
        options: MarkOptions(
        recognizerFactory: (text, payload) => LongPressGestureRecognizer(duration: const Duration(milliseconds: 200))
            ..onLongPress = () => debugPrint("long pressed text $text with payload $payload"),
        styleBuilder: (context, text, payload, defaultStyle) =>
            defaultStyle?.copyWith(decoration: TextDecoration.underline, color: Colors.red),
        ),
    )
    ],
),

Text source #

The following text shows an example on how marks are defined inside a text.

Lorem ${[ipsum]longpress()}, lorem ${[ipsum]i()}, lorem ${[ipsum]b()} 

Usage #

The marks id define how the mark is identified in the source string. The RegExp must contain three named groups and must be limited, that is it has to have symbols that allows to identify the end of the corresponding mark.

  • text generally the text to be displayed
  • id the type (id) used to identify which mark to use
  • payload the payload of the mark

Groups are named, therefore they can be placed in any order in the source string.


The default regexp matches the marks in this form:

${[text]type(payload)}

It is highly recommended to deeply test the regexp in order to be sure the correct functioning

The algorithm does the following:

  • matches the first mark and extracts its information
  • copies the remaining string after the match
  • repeat

Therefore be sure that the regexp matches only the strict necessary and is able to deterministically stop and the correct spot.

0
likes
150
pub points
0%
popularity

Publisher

unverified uploader

Interpret text by marking certain sections with specified tokens, allowing for custom callbacks and styling

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, url_launcher

More

Packages that depend on marked_text