stagexl_richtextfield 0.2.0+1

  • Installing
  • Versions
  • 75

StageXL RichTextField

Rich Text Field add-on package for StageXL - allows for multiple format ranges within a given text field.

Build Status


To use StageXL RichTextFields, simply import the package after importing stagexl itself...

import 'package:stagexl/stagexl.dart';
import 'package:stagexl_richtextfield/stagexl_richtextfield.dart';

void main() {

  CanvasElement canvas = querySelector("#richtext");
  Stage stage = new Stage('richtext', canvas)
    ..scaleMode = StageScaleMode.SHOW_ALL;
  RenderLoop render = new RenderLoop();
  RichTextFormat format = new RichTextFormat('Calibri, sans-serif', 25, 0x000000, align: TextFormatAlign.LEFT);
  RichTextField rtf = new RichTextField()
    ..defaultTextFormat = format
    ..text = 'Here is some sample {b}bold{/b} text.'
    ..width = stage.sourceWidth
    ..height = stage.sourceHeight
    ..wordWrap = true
    ..y = 0;



Doing it by hand

RichTextField adds startIndex and endIndex fields to the RichTextFormat class. A -1 in endIndex will anchor the format through the end of the string. These are commonly specified in the RichTextField.setFormat method, as follows:

RichTextFormat format = new RichTextFormat('Calibri, sans-serif', 25, 0x000000, align: TextFormatAlign.LEFT);
RichTextField rtf = new RichTextField('Manually setting some bold text', format, false)
    ..width = 400;

//the word "bold" above is at character positions 22 through 25
rtf.setFormat(format..bold=true, 22, 25);

As you add "ranged formats" to your RichTextField it applies logic to maintain mutually exclusive format ranges. This means that if you added italic=true from 5 through 25, and then bold=true from 10 through 15, the range from 10 to 15 will not be italicized, only bold - the original 5 to 25 italic is automatically split into two ranges, one from 5 to 9, the other from 16 to 25.

The easy way

As you can imagine, having to count character ranges simply to apply some formatting is not ideal. To address this, a simple parser is included which understand the set of "text tags" (wrapped in {}) defined below:

{b}BoldSome {b}bold{/b} text
{i}ItalicNow {i}italic{/i} text
{u}UnderlineCan do {u}underlines{/u}
{o}OverlineAnd {o}overlines{/o}
{s}StrikethroughEven {s}strikethrough{/s} text
{color=}Set colorSome {color=0xFF0000}red text{/color}
{font=}Set font{font=Georgia}Georgia{/font} on my mind
{size=[+-*/]}Set size{size=*2}Double{/size} and {size=-5}smaller{/size}
{[preset]}Apply presetI'm so {excited}excited, I just can't hide it!{/excited}

The {[preset]} tag bears some explanation. RichTextField also has a public Map<String, RichTextFormat> field named presets. If you have some combination of styles that you use regularly, instead of wrapping multiple tags every time, you can simply add the preset to your field and call it with a tag:

RichTextField rtf = new RichTextField()
    ..presets['excited'] = format.clone()..bold=true..italic=true..size=30..color=0xFF00FF;

Try out the sandbox example to get better acquainted.

Roll your own parser

The default included parser may not meet all of your needs. Beyond wrapping the low-level functions, the parser method itself is publically settable, so you can override with your own. (Note: this approach could use a code review to make pluggable parsers more robust).

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  stagexl_richtextfield: "^0.2.0+1"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:stagexl_richtextfield/stagexl_richtextfield.dart';
Version Uploaded Documentation Archive
0.2.0+1 Sep 4, 2017 Go to the documentation of stagexl_richtextfield 0.2.0+1 Download stagexl_richtextfield 0.2.0+1 archive
0.2.0 Aug 26, 2017 Go to the documentation of stagexl_richtextfield 0.2.0 Download stagexl_richtextfield 0.2.0 archive
0.1.5 Dec 3, 2016 Go to the documentation of stagexl_richtextfield 0.1.5 Download stagexl_richtextfield 0.1.5 archive
0.1.4 Aug 8, 2016 Go to the documentation of stagexl_richtextfield 0.1.4 Download stagexl_richtextfield 0.1.4 archive
0.1.3+3 Jan 24, 2016 Go to the documentation of stagexl_richtextfield 0.1.3+3 Download stagexl_richtextfield 0.1.3+3 archive
0.1.3+2 Nov 21, 2015 Go to the documentation of stagexl_richtextfield 0.1.3+2 Download stagexl_richtextfield 0.1.3+2 archive
0.1.3+1 Nov 21, 2015 Go to the documentation of stagexl_richtextfield 0.1.3+1 Download stagexl_richtextfield 0.1.3+1 archive
0.1.3 Nov 21, 2015 Go to the documentation of stagexl_richtextfield 0.1.3 Download stagexl_richtextfield 0.1.3 archive
0.1.2 Mar 23, 2014 Go to the documentation of stagexl_richtextfield 0.1.2 Download stagexl_richtextfield 0.1.2 archive
0.1.1 Jan 26, 2014 Go to the documentation of stagexl_richtextfield 0.1.1 Download stagexl_richtextfield 0.1.1 archive

All 11 versions...


We analyzed this package on Jun 19, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
61 / 100
Code health derived from static analysis. [more]
99 / 100
Reflects how tidy and up-to-date the package is. [more]
76 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Primary library: package:stagexl_richtextfield/stagexl_richtextfield.dart with components: html.


  • Maintain

    Changelog entries help clients to follow the progress in your code.

  • Use constrained dependencies.

    The pubspec.yaml contains 1 dependency without version constraints. Specify version ranges for the following dependencies: browser.

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 6 hints.

    Run dartfmt to format lib/src/rich_font_style_metrics.dart.

    Run dartfmt to format lib/src/rich_text_field.dart.

    Similar analysis of the following files failed:

    • lib/src/rich_text_format.dart (hint)
    • lib/src/rich_text_line_metrics.dart (hint)
    • lib/src/rich_text_parser.dart (hint)
    • lib/src/tools.dart (hint)
  • Maintain an example.

    None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use stagexl_richtextfield.dart.

  • Use analysis_options.yaml.

    Rename old .analysis_options file to analysis_options.yaml.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.0 <2.0.0
browser any 0.10.0+3
stagexl ^1.0.0 1.3.1+4
Transitive dependencies
collection 1.14.10
matcher 0.12.3
path 1.6.1
petitparser 1.7.6
stack_trace 1.9.2
xml 3.0.0