Super Rich Text

Check it out at Pub.Dev

The easiest way to style custom text snippets

ezgif com-video-to-gif-3

Help Maintenance

I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.

Buy Me A Coffee

Defaults

In standard markers the "*" is set to bold and "/" to italics as in the example:

SuperRichText(
  text: 'Text in *bold* and /italic/'
)

Others Markers

But you can change and set your own by passing a list of other labels:

SuperRichText(
  text: 'Text in *bold* and /italic/ with color llOrangell and color rrRedrr',
  style: TextStyle(
    color: Colors.black87,
    fontSize: 22
  ),
  othersMarkers: [
    MarkerText(
      marker: 'll',
      style: TextStyle(
        color: Colors.orangeAccent
      )
    ),
    MarkerText(
      marker: 'rr',
      style: TextStyle(
          color: Colors.redAccent
      )
    ),
  ],
)

Override Global Markers

Or even override "*" and "/" by setting global styles not to be used:

SuperRichText(
  text: 'Text in *bold* and /italic/ with color llOrangell and color rrRedrr',
  useGlobalMarkers: false, // set false
  style: TextStyle(
    color: Colors.black87,
    fontSize: 22
  ),
  othersMarkers: [
    MarkerText(
        marker: '*',
        style: TextStyle(
            color: Colors.orangeAccent
        )
    )...
  ],
)

Global Markers

The markers in the "othersMarkers" parameter are only for the widget in question, but you can also distinguish global markers:

SuperRichText.globalMarkerTexts.add(MarkerText(
    marker: '|',
    style: TextStyle(
      color: Colors.deepPurple
    )
  )
);

It is also possible to insert functions or links directly into the text:

MarkerText.withUrl(
  marker: 'll',
  urls: [
    'https://www.google.com',
    'https://www.facebook.com'
  ],
  style: TextStyle(
    fontSize: 36,
    color: Colors.orangeAccent
  )
)

In this case, the link list should be in exactly the same sequence as the links within the text, having as base text: "this text has llLink1ll and llLink2ll", the example above would set Link1 as 'https://www.google.com' and Link2 as 'https://www.facebook.com'. Another point is that it already has a bold style and blue text by default.

Functions

With functions, the sequence is also the same, but the call should look like this:

MarkerText.withFunction(
  marker: '<ff>',
  functions: [
    () => print('function 1'),
    () => print('function 2')
  ],
  style: TextStyle(
    color: Colors.greenAccent
  )
)

Same Functions

When your text has multiple words that perform the same function and has the same style, you can use this:

MarkerText.withSameFunction(
  marker: '<sf>',
  function: print('same function'),
  style: TextStyle(
    color: Colors.greenAccent
  )
)

Libraries

super_rich_text