flutter_decorated_text

Description:

flutter decorated text

Flutter DecoratedText #
The DecoratedText widget allows you to style and interact with different parts of a text string based on predefined rules. It's versatile, easy-to-use, and can handle different scenarios such as matching specific words, phrases, or patterns, allowing you to style the matched text differently.

Features #

Selectable Text: Enable the selectable property (selectable: true) to allow text selection in the DecoratedText widget.
Predefined Rules: These are used to match different elements within the text. These rules include:

Matching words.
Matching text starting with a particular prefix.
Matching text between specific tags.
Matching links (URLs).


Interactive: Each rule can include an onTap callback, which returns the matched text, allowing you to implement interactive behavior such as opening a link when a URL is tapped.

Usage Examples #
Match Text Between Tags #
DecoratedText(
text: "Like between brackets {this is an example} or html tags <p>this is a paragraph</p>",
rules: [
DecoratorRule.between(
start: "{",
end: "}",
style: TextStyle(
color: Colors.blue,
),
),
DecoratorRule.between(
start: "<p>",
end: "</p>",
style: TextStyle(
color: Colors.green,
),
),
],
);
copied to clipboard
Match Text Starting With a Prefix #
DecoratedText(
text: "Like twitter accounts @gabdsg or hashtags #decoratedtext",
rules: [
DecoratorRule.startsWith(
text: "@",
onTap: (match) {
print(match);
},
style: TextStyle(
color: Colors.blue,
),
),
DecoratorRule.startsWith(
text: "#",
onTap: (match) {
print(match);
},
style: TextStyle(
color: Colors.green,
),
),
],
);
copied to clipboard
Match Specific Words #
DecoratedText(
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
rules: [
DecoratorRule.words(
words: ["lorem ipsum", "industry", "book", "make"],
onTap: (match) {
print(match);
},
style: TextStyle(
background: Paint()..color = Colors.yellow,
),
),
],
);
copied to clipboard
Match URLs #
DecoratedText(
text: "You can match links with https https://pub.dev/ and links without it like google.com",
rules: [
DecoratorRule.url(
onTap: (url) {
print(url);
},
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
],
);
copied to clipboard
Custom Rule using Regular Expressions #
DecoratedText(
text: "Match links and add the favicon: https://pub.dev/, https://google.com, stackoverflow.com and talkingpts.org",
rules: [
DecoratorRule(
regExp: RegExp(r'((https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256

}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))',
caseSensitive: false,
dotAll: true,
multiLine: true,
),
onTap: (url) {
print(url);
},
style: TextStyle(
color: Colors.blue,
),
leadingBuilder: (match) => Container(
width: 16 * 0.8,
height: 16 * 0.8,
margin: const EdgeInsets.only(right: 2, left: 2),
child: CachedNetworkImage(
imageUrl: "${sanitizeUrl(match)}/favicon.ico",
),
),
),
],
),
copied to clipboard
Match emojis #
DecoratedText(
text: "I love Flutter! 😍",
rules: [
DecoratorRule(
regExp: RegExp(r'(\p{Emoji_Presentation})', unicode: true),
style: const TextStyle(
fontSize: 30.0,
),
onTap: (emoji) {
debugPrint('You tapped on the emoji: $emoji');
},
),
],
),
copied to clipboard
Remember, with the DecoratedText widget, you can style your text based on predefined rules, add interactivity, and handle complex matching scenarios with ease. Happy coding!