stagexl_richtextfield 0.3.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 76

StageXL RichTextField #

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

NOTE: as of version 0.10.0-dev, StageXL_RichTextField requires a Dart 2 SDK.

Build Status

Usage #

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

changelog #

This file contains highlights of what changes on each version of the StageXL_RichTextField package. This file is normally updated whenever we push a new version to pub.

Pub version 0.3.1 #

  • Raised dependency to StageXL 1.4.1
  • Ready for Dart 2.4

Pub version 0.3.0 #

  • Raised dependency to StageXL 1.4.0
  • Ready for Dart 2.0

Pub version 0.2.0 #

  • No Changelog available


Use this package as a library

1. Depend on it

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

  stagexl_richtextfield: ^0.3.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';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Dec 12, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.13.1+4

Health suggestions

Format lib/src/rich_font_style_metrics.dart.

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

Format lib/src/rich_text_field.dart.

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

Format lib/src/rich_text_parser.dart.

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

Format lib/src/tools.dart.

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

Maintenance suggestions

The package description is too short. (-16 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.4.0 <3.0.0
stagexl >=1.4.1 <2.0.0 1.4.1
Transitive dependencies
charcode 1.1.2
collection 1.14.12
convert 2.1.1
meta 1.1.8
petitparser 2.4.0
typed_data 1.1.6
xml 3.6.1
Dev dependencies
build_runner any
build_test any
build_web_compilers any
pedantic any