display a Dart string in Flutter using simple rich text characters

Overview

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.

Comments
  • Add the textScaleFactor parameter

    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,
            );
          },
    
    opened by timbotimbo 5
  • Can't add a / in a url

    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?

    opened by cekrozl1 1
  • [feature] Add trailing option

    [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
      ),
    ),
    
    opened by wcoder 1
  • [Bug][Android] Font size

    [Bug][Android] Font size

    simple_rich_text: 1.0.35

    Flutter bug:

    https://github.com/flutter/flutter/issues/14675

    Solution:

    Replace RichText to Text.rich:

    https://github.com/remoteportal/simple_rich_text/blob/b7484daadc607a43825eab6a5df1ca2f8473d80c/lib/simple_rich_text.dart#L265

    opened by wcoder 1
  • Add new line option, some fontStyles, text align, text overflow, max …

    Add new line option, some fontStyles, text align, text overflow, max …

    Hello! I recently discovered your plugin and found it very useful and interesting. That said, I noticed that it lacks some functionalities that I use a lot. I have added several like:

    • Line break
    • Some of the most used fontStyles (at least for me)
    • Option to open url (using url plugin: lancher). The option of tel, mailto, etc. would remain pending
    • Option of textAlign, textOverflow and maxLines

    I hope this can help you. Best regards

    opened by AlbertMartiCots 1
  • How to remove formatting from URL?

    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?

    opened by zeddyyz 1
  • How to  convert into HTML format

    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

    opened by rohitcalidig 0
  • How to generate html from the pattern string?

    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?

    opened by varun-calidig 0
  • Colors in hex format + regex ignoring chars in {}

    Colors in hex format + regex ignoring chars in {}

    The new regex ignores / _ in between { } allowing for urls with these characters + The colors can be specified in hex format (+ FF opacity specific to flutter)

    opened by cekrozl1 0
Owner
Peter Alvin
Flutter/Dart app developer
Peter Alvin
A Translator App Which is Build using Flutter, Speech To Text, Google ML Kit, Google Translator and Text To Speech.

AI Translator This is a Translator App Which is Build using Flutter, Speech To Text, Google ML Kit, Google Translator and Text To Speech. Download App

null 4 Jul 16, 2022
A Flutter application implementing AR core, Text-to-speech, and Speech-to-text technologies.

ar_x_ai A Flutter application implementing AR core, Text to speech and Speech to text technologies. Getting Started This project is a starting point f

Alston Fernandes 1 Dec 17, 2021
LinkWell is a Text widget that highlight all the links in the text which then navigates the user to the URL when tapped

LinkWell LinkWell is Text Plugin that detects URLs and Emails in a String and when tapped opens in user browsers, linkwell GitHub ScreenShots Basic Us

Samuel Ezedi 31 Sep 27, 2022
Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to connect with friends,family & colleagues. Developed as a redesign of Microsoft Teams during my menteeship at Microsoft Engage 2021

Microsoft Teams Clone by Karanjot Singh About Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to conne

Karanjot Singh 60 Dec 28, 2022
Textfield-based rich input box

flutter_rich_input is no longer used and uses a better way to enable a new rich_input plugin, click here to see it! flutter_rich_input 不再维护,使用了更好的方式,新

yung 6 Jan 19, 2021
Feature-rich and easy-to-use Minecraft Fallout server bot.

更好的 Minecraft 廢土伺服器機器人 ?? 介紹 這是個具有許多功能的廢土機器人,且完全免費與開源 另一大特色就是具有容易操作的界面,而不是傳統的小黑窗,讓任何人都能夠輕鬆使用~ 詳細功能請看 這裡 祝您使用愉快! 立即下載 ?? 下載 本軟體支援 Windows、Linux、macOS 作

菘菘 9 Dec 23, 2022
Friendly-Chat - Simple text messaging app coded in Dart using the Flutter framework

Friendly Chat A mobile application coded in the Dart programming language using

Vladislav Kostic 3 May 15, 2022
Provide easy and flexible way to show SnackBar. Simple text, undo, and error style are supported.

snack_bar_presenter Provide easy and flexible way to show SnackBar. Simple text, undo, and error style are supported. . . . Usage import 'package:exam

Masayuki Ono (mono) 8 Nov 30, 2020
Dynamic Text Highlighting (DTH) package for Dart & Flutter.

Dynamic Text Highlighting (DTH) This package is used to highlight, in a completely dynamic way, keywords, or phrases, wherever they are present in a s

null 34 Oct 3, 2022
Flutter Widget to display PDF

pdf_flutter Inspired by Pdf_Viewer_Plugin ?? Wrapped around AndroidPdfViewer on Android. ???? 1. Add pdf_flutteron pubspec.yml dependencies: pdf_flu

Laxman Bhattarai 100 Sep 7, 2022
📱🌦 Flutter application to display PWS (Personal Weather Station) data

PWSWatcher Why? PWSWatcher is an open-source Android app used to monitor a PWS (Personal Weather Station) given the link of its real-time updated .xml

Giorgio Bertolotti 17 Oct 13, 2022
The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

flex_grid Language: English| 中文简体 The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that f

FlutterCandies 39 Nov 8, 2022
Compact representation of a placeholder for an image. Encode a blurry image under 30 caracters for instant display like used by Medium. Maintainer: @Solido

Flutter BlurHash Compact representation of a placeholder for an image. Generation You can use https://blurha.sh/ for testing or use any official api o

Flutter Community 408 Dec 30, 2022
LiveLine - A Health Monitoring/Awareness/Risk-Alert App which will display a Person's Heart rate, SpO2 level concentration and Body Temperature

A Health Monitoring/Awareness/Risk-Alert App which will display a Person's Heart rate, SpO2 (oxygen% in the body) level concentration and Body Temperature

Arpit Patawat 6 Jun 7, 2022
Flutter sample app using MLKit Vision API for text recognition

Flutter ML Kit Vision This a sample Flutter app integrated with the ML Kit Vision API for recognition of email addresses from an image. NOTE: The ML K

Souvik Biswas 21 Oct 12, 2022
Flutter plugin that detects the charset (encoding) of text bytes

flutter_charset_detector Automatically detect and decode the charset (character encoding) of text bytes. The example app; details This plugin uses nat

Aaron Madlon-Kay 11 Jun 8, 2022
A flutter widget that show the camera stream and allow ML vision recognition on it, it allow you to detect barcodes, labels, text, faces...

Flutter Camera Ml Vision A Flutter package for iOS and Android to show a preview of the camera and detect things with Firebase ML Vision. Installation

Rushio Consulting 257 Jan 2, 2023
Sytôdy, a Flutter "speech to text" todo app POC

Sytôdy, a Flutter "speech to text" todo app POC ⚠️ iOS10(Swift) & Android Usage Install flutter cd sytody flutter run ?? Video demo How it works TL;DR

Erick Ghaumez 83 Jan 19, 2022
Android app that recognizes text on photos.

Text Reconition app Text recognition app built with flutter This is a simple flutter app built for recognizing text from images. The app takes a image

Aaqil Shihab 9 Oct 31, 2022