linked_text 1.1.1

A Flutter widget that renders text with interpolated tappable links using a simple template syntax.

linked_text

A Flutter widget that renders text with interpolated tappable links using a simple template syntax.

Features

• Simple template syntax for embedding links in text
• Auto-indexed ({{link}}) and explicitly indexed ({N{link}}) placeholders
• Default URL launching via url_launcher or custom onTap callback
• Semantic labels for accessibility
• Customizable text and link styles
• Proper gesture recognizer lifecycle management

Installation

dependencies:
  linked_text: ^1.0.0

Localization

The {{text}} placeholder syntax used by linked_text clashes with Flutter's gen_l10n ICU message parser. To fix this, l10n.yaml needs relax-syntax: true.

This is handled automatically. The package includes a build hook that detects your l10n.yaml and adds the setting if it's missing. If your first build after adding linked_text fails with ICU syntax errors, just re-run the build — the hook will have already fixed the configuration.

If you don't use gen_l10n (no l10n.yaml), no action is needed.

Usage

Basic usage with a single link

LinkedText(
  text: 'Visit the {{Flutter website}} for more info.',
  urls: ['https://flutter.dev'],
  urlLabels: ['Link to Flutter website'],
)

Multiple auto-indexed links

Un-indexed placeholders are automatically assigned sequential indices:

LinkedText(
  text: '{{Privacy Policy}} | {{Terms of Service}}',
  urls: [
    'https://example.com/privacy',
    'https://example.com/terms',
  ],
  urlLabels: [
    'Link to Privacy Policy',
    'Link to Terms of Service',
  ],
)

Explicitly indexed links

Use {N{text}} syntax (1-based) to control which URL each placeholder maps to:

LinkedText(
  text: 'Built with {1{Flutter}}, powered by {2{Dart}}.',
  urls: [
    'https://flutter.dev',
    'https://dart.dev',
  ],
  urlLabels: [
    'Link to Flutter',
    'Link to Dart',
  ],
)

Custom tap handling

LinkedText(
  text: 'Read the {{documentation}}.',
  urls: ['https://example.com/docs'],
  urlLabels: ['Link to documentation'],
  onTap: (url, index) {
    // Custom handling instead of launching URL
    print('Tapped link $index: $url');
  },
)

Custom styles

LinkedText(
  text: 'Check out {{this link}}.',
  urls: ['https://example.com'],
  urlLabels: ['Example link'],
  style: TextStyle(fontSize: 14, color: Colors.grey),
  linkStyle: TextStyle(
    fontSize: 14,
    color: Colors.blue,
    decoration: TextDecoration.underline,
  ),
  textAlign: TextAlign.center,
)

Template Syntax

Syntax	Description	Example
{{text}}	Auto-indexed link (0-based, sequential)	{{Click here}}
{N{text}}	Explicitly indexed link (N is 1-based)	{1{Click here}}

API Reference

See the API documentation for full details.