remoteportal/simple_rich_text

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 character	format effect	simple_rich_text string input	Flutter 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.

key	meaning	implemented Dart code
color	red, blue, etc	textStyle.color: color-value
pop	pop the navigation stack	Navigator.pop(context);
push	push the value onto the navigation stack	Navigator.pushNamed(context, '/$route');
repl	replace the top route on the navigation stack	Navigator.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_value	hex value
aqua	0x00FFFF
black	0x000000
blue	0x0000FF
brown	0x9A6324
cream	0xFFFDD0
cyan	0x46f0f0
green	0x00FF00
gray	0x808080
grey	0x808080
mint	0xAAFFC3
lavender	0xE6BEFF
new	0xFFFF00
olive	0x808000
orange	0xFFA500
pink	0xFFE1E6
purple	0x800080
red	0xFF0000
silver	0xC0C0C0
white	0xFFFFFF
yellow	0xFFFF00

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.