simple_rich_text

Easily format Flutter text with simple format characters.

Motivation: lowest-possible development friction to add color and formatting to text.

In comparison, easy_rich_text requires lots of code (i.e, patternList of EasyRichTextPattern objects).

Format Characters

These are non-standard (not markdown compatible) but are more intuitive, in my opinion:

format characterformat effectsimple_rich_text string inputFlutter output
asterisk (*)bold"this is *bold*"this is bold
slash (/)italics"this is /italicized/"this is italicized
underscore (_)underline"this is _underlined_"this is underlined

Example Input

SimpleRichText(r'*_/this is all three*_/ (*{color:red}bold*, _{color:green}underlined_, and /{color:brown}italicized/). _{push:home;color:blue}clickable hyperlink to home screen_')

Example Flutter Output

Screenshot

Attributes

Attribute pairs are placed in curly brackets immediately after first character marker. Each pair is separated by a semicolon (;) and can be in any order. Each pair has syntax name:value.

keymeaningimplemented Dart code
colorred, blue, etctextStyle.color: color-value
poppop the navigation stackNavigator.pop(context);
pushpush the value onto the navigation stackNavigator.pushNamed(context, '/$route');
replreplace the top route on the navigation stackNavigator.popAndPushNamed(context, '/$route');

Colors Supported

Change text color by passing color as attribute:

Example

"this is blue hyperlink to the _{color:blue,push:calendar}calendar_ screen"
color:color_valuehex value
aqua0x00FFFF
black0x000000
blue0x0000FF
brown0x9A6324
cream0xFFFDD0
cyan0x46f0f0
green0x00FF00
gray0x808080
grey0x808080
mint0xAAFFC3
lavender0xE6BEFF
new0xFFFF00
olive0x808000
orange0xFFA500
pink0xFFE1E6
purple0x800080
red0xFF0000
silver0xC0C0C0
white0xFFFFFF
yellow0xFFFF00

Features

  • support text hyperlinks to other screens by preceding formatted text with route inside curly brackets: e.g., "... {calendar}go to calendar screen".

Sample Inputs:

'this is /italic/'

'this is *bold*'

'*_/this is all three*_/ (*bold*, _underlined_, and /italicized/)'

'you can quote characters to NOT format a word \*bold\*'

'this is _underline_'

'go to _{/myroute}home_ page'

'this is ~important~(red).'

'this is _*bold and underlined*_.'

Notes

You can use multiple characters at the same time:

"this is _/underlined and italicized/_"

You can be sloppy! Unlike HTML, for convenience, if using multiple characters the open and closed sequences, they don't need to be in exact palindrome matching order:

"these are */equivalent/* and works without problems."
"these are */equivalent*/ and works without problems."

Requirements

Ancestor MUST have textDirection set (required by internal RichText widget), either through MaterialApp widget or explicitly wrapped by a Directionality widget:

Directionality(
    child: SimpleRichText('Peter', term: 't'),
    textDirection: TextDirection.ltr)

Improvements, Bugs, and Deficiencies

  • user-definable format characters
  • user-definable callback functions for custom formatting
  • support non-named navigation (only pushNamed, etc., supported at present)

Pull Requests

Pull requests are welcome!

Examples

See the example directory.

Libraries

simple_rich_text