flavor_text 0.1.0 icon indicating copy to clipboard operation
flavor_text: ^0.1.0 copied to clipboard

A lightweight and fully customisable text parser for Flutter.

Flavor Text #

plugin version coverage report pipeline status dependencies

A lightweight and fully customisable text parser for Flutter.

Flavor text is often the last text on a card or on the rear of a toy card or package, and is usually printed in italics or written between quotes to distinguish it from game-affecting text. — Flavor Text - Wikipedia

Writing rich text in Flutter can be a pain:

Text.rich(
  TextSpan(
    text: 'Welcome',
    children: [
      TextSpan(
        text: 'To my amazing',
        children: [
          TextSpan(
            text: 'App!',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ],
        style: TextStyle(color: Color(0xFFFF0000)),
      )
    ],
  ),
),

But writing rich text with Flavor Text is simply:

FlavorText(
  'Welcome <style color="0xFFFF0000">to my amazing <style fontWeight="bold">App!</style></style>',
),

Installation #

Add flavor_text as a dependency in your pubspec.yaml file (what?).

Docs & API #

See the API Docs for detailed information on how to use Flavor Text.

See the interactive example for of all the things that you can do with Flavor Text: Flavor Text example

Usage #

Flavor Text allows you to create custom rich text using strings. You don't have to mess with Text.rich and TextSpan's. Just you, your text and a single widget.

See the Basic Usage section for an introduction or jump directly to the Advanced Usage section.

Basic Usage #

Flavor Text uses Tag components to build your custom rich text. These Tag components make the magic possible. Flavor Text comes with a few default Tag components.

You can register custom Tag components, see the Advanced Usage section.

Let's start with defining the rich text you want to use as a string:

final richText = 'Hello <style color="0xFFFF0000">world</style>';

We have now created a string with some custom styling, and we can use that string in our Widget tree like so:

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      ...
      
      FlavorText(richText),
      
      ...
    ],
  );
}

Which will render the text Hello world with the word world in red.

The FlavorText widget also accepts extra arguments for default styling and text alignment:

FlavorText(
  richText,
  style: TextStyle(
    color: Colors.green,
  ),
  textAlign: TextAlign.center,
)

You can also nest multiple tags, example:

final richText = 'Hello <style color="0xFFFF0000">world and <style fontWeight="bold">you</style></style>!';

Advanced Usage #

If the default Tag components are not suitable for your needs or you need something specifically tailored to your usecase, you can easily create and register your own tag.

First you need to create your own tag, for this example we will create a tag that adds the Icons.help icon to our text:

class HelpTag extends Tag {
  @override
  InlineSpan build(BuildContext context) {
    return WidgetSpan(child: Icon(Icons.help));
  }
}

You can then register it by calling the FlavorText.registerTag:

void main() {
  ...

  // The first argument is the tag key.
  FlavorText.registerTag('help', () => HelpTag());

  ...
}

Now that our new tag is registered we can use it in our text:

FlavorText('This text will end in an icon <help></help>');

// Or using a self-closing tag.
FlavorText('This text will end in an icon <help/>');

If we want to add some properties to our tag for more fine tuned control, for example we want to be able to change the color:

class HelpTag extends Tag {
  @override
  List<Property> get supportedProperties => [Property('color')];

  @override
  InlineSpan build(BuildContext context) {
    final colorValue = properties['color']?.value;
    var color = Colors.black;
    if (colorValue != null) {
      color = Color(int.parse(colorValue));
    }

    return WidgetSpan(
      child: Icon(
        Icons.help,
        color: color,
      ),
    );
  }
}

The supportedProperties define which properties are allowed on our tag, and we can read the value by accessing the properties field.

Now that we have properties we can use these in our tag:

FlavorText('This text will end in an icon <help color="0xFF00FF00"/>');
9
likes
130
pub points
40%
popularity

Publisher

shield icon for verified publisherswolfenra.in

A lightweight and fully customisable text parser for Flutter.

Repository (GitLab)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

dartlin, flutter, xml

More

Packages that depend on flavor_text