decoratable_text

Decorate a part of the text, such as changing the style and setting a tap action.

Installing

https://pub.dev/packages/decoratable_text#-installing-tab-

Usage

Decorate url text

...
const DecoratableText(
  text: "url: https://flutter.dev/",
  decorations: [
    DecorationOption(
      pattern: TextPattern.url,
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchUrl,
      showRipple: true,
    ),
  ],
),
...

Decorate mail text

...
const DecoratableText(
  text: "mail: [email protected]",
  decorations: [
    DecorationOption(
      pattern: TextPattern.mail,
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchMail,
      showRipple: true,
    ),
  ],
),
...

Decorate url text and change url display

...
const DecoratableText(
  text:
      "You can change the text that matches the pattern. -> https://flutter.dev/",
  decorations: [
    DecorationOption(
      pattern: TextPattern.url,
      displayText: "Tap hare",
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchUrl,
      showRipple: true,
    ),
  ],
),
...

Decorate any text

...
DecoratableText(
  text: "You can set custom tap actions. #SnackBar",
  decorations: [
    DecorationOption(
      pattern: r"#[a-zA-Z0-9_]+",
      style: TextStyle(color: Colors.teal),
      onTap: () => Scaffold.of(context).showSnackBar(
        const SnackBar(
          content: Text("Tapped #SnackBar"),
        ),
      ),
      showRipple: true,
    ),
  ],
),
...

Decorate multiple texts

...
const DecoratableText(
  text:
      "You can set multiple decoration options. \nFlutter: https://flutter.dev/ #flutter \nDart: https://dart.dev/ #dart",
  decorations: [
    DecorationOption(
      pattern: r"#[a-zA-Z0-9_]+",
      style: TextStyle(color: Colors.teal),
    ),
    DecorationOption(
      pattern: TextPattern.url,
      style: TextStyle(color: Colors.blue),
      tapAction: TapAction.launchUrl,
      showRipple: true,
    ),
  ],
),
...