flutter_markup_text 0.1.0 copy "flutter_markup_text: ^0.1.0" to clipboard
flutter_markup_text: ^0.1.0 copied to clipboard

This powerful Flutter package empowers developers to annotate their text with markup tags, allowing for the extraction and association of valuable information.

📌 MarkupText Widget Documentation #

🚀 Introduction #

MarkupText is a lightweight yet powerful Flutter widget that adds tappable, styled links within your text using simple @{...} markup syntax. It supports rich interactions, custom styles, and is fully localizable and layout-friendly for both LTR and RTL languages.

MarkupText Demo

🧑‍💻 Usage Guide #

1. 📦 Installation #

Add the widget file to your Flutter project or use it as a package (coming soon).

2. 📝 Markup Your Text #

Wrap clickable words or phrases with @{...} to define links:

String text = "By continuing, you agree to our @{Terms of Service} and @{Privacy Policy}.";

3. 🧠 Assign Actions to Marked Text #

Pass a list of Mark objects to define click behavior:

MarkupText(
  text: text,
  marks: [
    Mark("Terms of Service", () => print("Terms tapped")),
    Mark("Privacy Policy", () => print("Policy tapped")),
  ],
);

4. 🎨 Customize Appearance #

You can style both normal and clickable text separately:

textStyle: TextStyle(
  fontSize: 14,
  color: Colors.grey[700],
),
marksStyle: TextStyle(
  fontSize: 14,
  fontWeight: FontWeight.bold,
  color: Colors.blue,
),

5. ⚙️ Control Layout #

Support for layout parameters:

textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 2,
textDirection: TextDirection.rtl,

📚 Full Example #

MarkupText(
  text: "Read our @{Terms} and @{Privacy Policy}.",
  marks: [
    Mark("Terms", () => print("Terms clicked")),
    Mark("Privacy Policy", () => print("Privacy clicked")),
  ],
  textStyle: TextStyle(fontSize: 13),
  marksStyle: TextStyle(
    fontWeight: FontWeight.w600,
    color: Colors.teal,
    decoration: TextDecoration.underline,
  ),
  textAlign: TextAlign.start,
  overflow: TextOverflow.visible,
  maxLines: 3,
  textDirection: TextDirection.ltr,
)

🔧 Additional Info #

Effortlessly add interactivity and visual appeal to inline text. Perfect for terms, policies, and onboarding flows!

1
likes
160
points
22
downloads

Publisher

unverified uploader

Weekly Downloads

This powerful Flutter package empowers developers to annotate their text with markup tags, allowing for the extraction and association of valuable information.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_markup_text