simple_rich_text

Description:

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_')
copied to clipboard
Example Flutter Output #

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"
copied to clipboard



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*_.'
copied to clipboard
Notes #
You can use multiple characters at the same time:
"this is _/underlined and italicized/_"
copied to clipboard
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."
copied to clipboard
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)
copied to clipboard
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.