Drawable Text

A Flutter package that provides a text widget with drawable widgets at the start and end positions. This package allows you to easily add icons or any widget before or after text with customizable alignment and styling options, auto-detection for Markdown and HTML, and interactive links.

Features

  • Add drawable widgets at the start and/or end of text
  • Customize text appearance (size, color, font family, weight, etc.)
  • Auto-detection and rendering for Markdown and HTML content
  • Interactive links with onTapLink callback
  • Markdown table formatting with clean, modern card styling
  • Text selection capability
  • Customizable padding between text and drawable widgets
  • Different alignment options for drawable widgets
  • Support for text overflow handling and max lines
  • Easy to use factory constructors for common use cases

Getting started

Add the package to your pubspec.yaml file:

dependencies:
  drawable_text: ^1.0.2

Run the following command to get the package:

flutter pub get

Usage

Basic Usage

DrawableText(
  text: 'Hello World',
  drawableStart: Icon(Icons.star),
  drawableEnd: Icon(Icons.arrow_forward),
  drawablePadding: 8.0,
)

// Global setup for link tapping (e.g. using url_launcher)
DrawableText.initial(
  selectable: true,
  onTapLink: (text, href, title) {
    if (href != null) {
      launchUrl(Uri.parse(href));
    }
  },
);

// Or per instance
DrawableText(
  text: 'Visit [Flutter](https://flutter.dev) for more info!',
  onTapLink: (text, href, title) {
    print('Tapped link: $href');
  },
)

With Custom Styling

DrawableText(
  text: 'Styled Text',
  size: 18.0,
  color: Colors.blue,
  fontWeight: FontWeight.bold,
  drawableStart: Icon(Icons.favorite, color: Colors.red),
  drawablePadding: 10.0,
  textAlign: TextAlign.center,
  maxLines: 2,
)

Using Factory Constructor for Title

DrawableText.title(
  text: 'Section Title',
  color: Colors.black87,
  drawableStart: Icon(Icons.title),
  drawablePadding: 8.0,
)

With HTML or Markdown Content

DrawableText(
  text: '<p>This is <b>HTML</b> content</p>',
  drawableStart: Icon(Icons.code),
  drawablePadding: 8.0,
)

Additional Information

  • Package is licensed under the MIT License
  • For issues and feature requests, please visit the GitHub repository
  • Contributions are welcome through pull requests

Libraries

drawable_text