StyledText: A Rich Text Widget with Enhanced Formatting Capabilities

StyledText is a Flutter package that allows you to create text widgets with advanced formatting options. By utilizing XML tags within the text, you can apply various styles, insert icons, and even incorporate widgets seamlessly.

Features

• Styled Text Using Tags: Define text styles, icons, and behaviors using customizable tags.
• Tag Handler Customization: Create custom tag definitions to handle specific actions, such as opening links.
• Inserting Widgets: Integrate widgets directly into your text, providing interactive elements.
• Rich Text Selection: Enable text selection for formatted text, making it easy to interact with specific sections.

Usage

1. Installation

Add the dependency to your Flutter project:

dependencies:
  styled_text: ^[version]

Import the package:

import 'package:styled_text/styled_text.dart';

2. Creating StyledText

Use the StyledText widget to display formatted text:

StyledText(
  text: 'Format your text with tags: <bold>bold</bold>',
  tags: {
    'bold': StyledTextTag(style: TextStyle(fontWeight: FontWeight.bold)),
  },
)

Examples

1. Bold Text

StyledText(
  text: 'Example: <bold>bold</bold> text.',
  tags: {
    'bold': StyledTextTag(style: TextStyle(fontWeight: FontWeight.bold)),
  },
)

2. Icon Insertion

StyledText(
  text: 'Text with alarm <alarm/> icon.',
  tags: {
    'alarm': StyledTextIconTag(Icons.alarm),
  },
)

3. Clickable Link

StyledText(
  text: 'Text with <link href="https://flutter.dev">link</link> inside.',
  tags: {
    'link': StyledTextActionTag(
      (String? text, Map attrs) {
        final String link = attrs['href'] ?? '';
        // Handle link click here...
      },
      style: TextStyle(decoration: TextDecoration.underline),
    ),
  },
)

4. Custom Attribute Parsing

StyledText(
  text: 'Text with custom <color text="#ff5500">color</color> text.',
  tags: {
    'color': StyledTextCustomTag(
      baseStyle: TextStyle(fontStyle: FontStyle.italic),
      parse: (baseStyle, attributes) {
        // Custom logic for parsing attributes and creating a style...
        return baseStyle;
      },
    ),
  },
)

5. Widget Insertion

StyledText(
  text: 'Text with <input/> inside.',
  tags: {
    'input': StyledTextWidgetTag(
      child: TextField(
        decoration: InputDecoration(hintText: 'Input'),
      ),
      size: Size.fromWidth(200),
      constraints: BoxConstraints.tight(Size(100, 50)),
    ),
  },
)

Migration from Version 2.0

The styling and behavior specification method has changed in version 3.0. Here's how to migrate your code:

1. Text Style Specification

OLD:

StyledText(
  text: 'Text: <b>bold</b> text.',
  styles: {
    'b': TextStyle(fontWeight: FontWeight.bold),
  },
)

NEW:

StyledText(
  text: 'Text: <b>bold</b> text.',
  tags: {
    'b': StyledTextTag(style: TextStyle(fontWeight: FontWeight.bold)),
  },
)

2. Icon Specification

OLD:

StyledText(
  text: 'Text with alarm <alarm/> icon.',
  styles: {
    'alarm': IconStyle(Icons.alarm),
  },
)

NEW:

StyledText(
  text: 'Text with alarm <alarm/> icon.',
  tags: {
    'alarm': StyledTextIconTag(Icons.alarm),
  },
)

3. Tap Handler Specification

OLD:

StyledText(
  text: 'Text with <link href="https://flutter.dev">link</link> inside.',
  styles: {
    'link': ActionTextStyle(
      decoration: TextDecoration.underline,
      onTap: (_, attrs) => _openLink(context, attrs),
    ),
  },
)

NEW:

StyledText(
  text: 'Text with <link href="https://flutter.dev">link</link> inside.',
  tags: {
    'link': StyledTextActionTag(
      (_, attrs) => _openLink(context, attrs),
      style: TextStyle(decoration: TextDecoration.underline),
    ),
  },
)

4. Custom Attribute Parser and Style Creation

OLD:

StyledText(
  text: 'Text with custom <color text="#ff5500">color</color> text.',
  styles: {
    'color': CustomTextStyle(
      baseStyle: TextStyle(fontStyle: FontStyle.italic),
      parse: (baseStyle, attributes) {
        // Custom logic for parsing attributes and creating a style...
      },
    ),
  },
)

NEW:

StyledText(
  text: 'Text with custom <color text="#ff5500">color</color> text.',
  tags: {
    'color': StyledTextCustomTag(
      baseStyle: TextStyle(fontStyle: FontStyle.italic),
      parse: (baseStyle, attributes) {
        // Custom logic for parsing attributes and creating a style...
      },
    ),
  },
)