remoteportal / simple_rich_text

display a Dart string in Flutter using simple rich text characters

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

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.

simple_rich_text's Issues

Can't add a / in a url

Hi !
I'm using this great package of yours but I can't find a way to add a '/' in a URL.
The closest I came was by using \/ which displays / but breaks the URL logic:

"_{http:www.developer.android.com\\/platform\\/technology\\/app-bundle;color:blue}AAB_"
same result with
r'_{http:www.developer.android.com\/platform\/technology\/app-bundle;color:blue}AAB_',

Is there something else I should try?

Add the textScaleFactor parameter

A Text widget scales the font based on the textScaleFactor * fontSize.
If you never set this scale, it uses the value from the context, which is usually determined by the accessibility settings in android.

RichText doesn't seem to do use the context textScaleFactor by default, which makes simple_rich_text ignore it too.
So on some phones the rich text is a different size from any other text widgets.

Using a mediaquery RichText follows the behavior of normal Text widgets.

RichText(
    text: ,
    textScaleFactor: MediaQuery.of(context).textScaleFactor,
);

Can you add this parameter to the simple_rich_text constructor, and pass that to RichText?

Here is how you can manually set the global textScaleFactor in main to do some testing.

return new MaterialApp(
      //set global text scale factor in builder
      builder: (BuildContext context, Widget child) {
        final MediaQueryData data = MediaQuery.of(context);
        return MediaQuery(
          data: data.copyWith(textScaleFactor: 1),
          child: child,
        );
      },

Support Flutter 2

How to convert into HTML format

Now you can change the {fontSize:32}size of the text. \nInsert a new line.\nChange the {backgroundColor:yellow}background color\nAnd modify more style as: fontFamily, {decorationColor:blue}decorationColor, {height:3}height, etc\n\nToo you can open url: {http:www.google.com;color:blue}go to Google\nFinaly, you can define textAlign, maxLines and textOverflow

Any option in web to convert into HTML format

[feature] Add trailing option

Add leading/trailing options to RichText.

Use case:

• Display required string should display with an asterisk, example: Name*

Solution:

Add:

		
final TextSpan trailing;

// ...

		if (trailing != null) {
          children.add(trailing);
        }

		// end
        return Text.rich(TextSpan(children: children));

Usage:

RichText(
  text: 'Name',
  trailing: TextSpan(
  	text: '*',
  	//style: can be red color
  ),
),

How to use SimpleRichText instead of TextSpan in RichText

How to generate html from the pattern string?

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')

is there any workaround to generate the html string of above input?

How to remove formatting from URL?

URL's naturally contain "//" or "/" and I cannot find a way to remove the italic formatting from them. Is there a way around that?

New Line

How do you start a new line or can this be added?

[Bug][Android] Font size

simple_rich_text: 1.0.35

Flutter bug:

flutter/flutter#14675

Solution:

Replace RichText to Text.rich:

simple_rich_text/lib/simple_rich_text.dart

Line 265 in b7484da

return RichText(text: TextSpan(children: children));

How to escape characters which do formatting normally?

If my text contains special characters like / _ or * how do I make it appear in the text?

UPDATE:
Use attribute chars with a regular expression.
E.g.:
SimpleRichText('Text with a / *symbol* in it.', chars: r'\*');
In this case * will work, but /-s will be escaped.
Output:
Text with a / symbol in it.

How do I make text Justified

Your package is awesome. I want to make Paragraph Justified. How I can do that?