Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
selectable_autolink_text cover
Package detailsv2.6.0

selectable_autolink_text

Generate inline links that can be selected and tapped in text for Flutter.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
12.4K
Likes
84
Pub points
140

Install package

flutter pub add selectable_autolink_text

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables the creation of selectable and tappable inline links within text. It automatically detects URLs, emails, and phone numbers in a string and renders them as interactive elements while preserving text selection capabilities. Ideal for rich text displays where users need to interact with embedded links without losing the ability to copy or highlight text. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux.

Use cases

  • Displaying rich text with clickable links
  • Enabling text selection in linked content
  • Creating interactive chat or message interfaces
  • Embedding contact details in app text
  • Supporting user-generated content with auto-links

Key features

  • Auto-detects URLs, emails, and phone numbers
  • Preserves text selection and copying
  • Customizable link styling
  • Cross-platform compatibility
  • Simple integration with Text widgets
  • Supports tap gestures on links

Suitable for

  • Chat applications
  • Social media feeds
  • Documentation viewers
  • User profile descriptions
  • Content-rich UIs with dynamic text

Considerations

  • May require additional styling for consistent appearance
  • Performance impact with large text blocks
  • Limited customization for non-standard link patterns
  • Requires careful handling of accessibility labels
  • Not suitable for complex rich text formatting beyond links

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Selectable Autolink Text

pub package

Generate inline links that can be selected and tapped in text for Flutter

Example

Install

https://pub.dev/packages/selectable_autolink_text#-installing-tab-

Usage

Basic
@override
Widget build(BuildContext context) {
  return SelectableAutoLinkText(
    'Basic https://flutter.dev',
    linkStyle: TextStyle(color: Colors.blueAccent),
    highlightedLinkStyle: TextStyle(
      color: Colors.blueAccent,
      backgroundColor: Colors.blueAccent.withAlpha(0x33),
    ),
    onTap: (url) => launchUrl(Uri.parse(url)),
    onLongPress: (url) => Share.share(url),
  );
}
Advanced
@override
Widget build(BuildContext context) {
  return SelectableAutoLinkText(
    '''
Advanced
You can shrink url like https://github.com/miyakeryo/flutter_selectable_autolink_text
tel: 012-3456-7890
email: mail@example.com''',
    style: TextStyle(color: Colors.green[800]),
    linkStyle: TextStyle(color: Colors.purpleAccent),
    highlightedLinkStyle: TextStyle(
      color: Colors.purpleAccent,
      backgroundColor: Colors.purpleAccent.withAlpha(0x33),
    ),
    onTransformDisplayLink: AutoLinkUtils.shrinkUrl,
    onTap: (url) async {
      print('🌶Tap: $url');
      final uri = Uri.parse(url);
      if (await canLaunchUrl(uri)) {
        launchUrl(uri);
      }
    },
    onLongPress: (url) {
      print('🍔LongPress: $url');
      Share.share(url);
    },
  );
}
Customized

You can customize link pattern.

@override
Widget build(BuildContext context) {
  return SelectableAutoLinkText(
    'Custom links'
    '\nHi! @screen_name.'
    ' If you customize the regular expression, you can make them.'
    ' #hash_tag',
    linkStyle: TextStyle(color: Colors.deepOrangeAccent),
    highlightedLinkStyle: TextStyle(
      color: Colors.deepOrangeAccent,
      backgroundColor: Colors.deepOrangeAccent.withAlpha(0x33),
    ),
    linkRegExpPattern: '(@[\\w]+|#[\\w]+|${AutoLinkUtils.urlRegExpPattern})',
    onTransformDisplayLink: AutoLinkUtils.shrinkUrl,
    onTap: (url) => print('🍒Tap: $url'),
    onLongPress: (url) => print('🍩LongPress: $url'),
  );
}
More advanced usage
@override
Widget build(BuildContext context) {
  final blueStyle = TextStyle(color: Colors.blueAccent);
  final highlightedStyle = TextStyle(
    color: Colors.blueAccent, 
    backgroundColor: Colors.blueAccent.withAlpha(0x33),
  );
  final orangeStyle = TextStyle(color: Colors.orange);
  final boldStyle = TextStyle(fontWeight: FontWeight.bold);
  final italicStyle = TextStyle(fontStyle: FontStyle.italic);
  final bigStyle = TextStyle(fontSize: 24);
  final regExpPattern = r'\[([^\]]+)\]\(([^\s\)]+)\)';
  final regExp = RegExp(regExpPattern);

  return SelectableAutoLinkText(
    '''
More advanced usage

[This is a link text](https://google.com)
[This text is bold](bold)
This text is normal
[This text is italic](italic)
[This text is orange](orange)
[This text is big](big)''',
    linkRegExpPattern: regExpPattern,
    onTransformDisplayLink: (s) {
      final match = regExp.firstMatch(s);
      if (match != null && match.groupCount == 2) {
        final text1 = match.group(1)!;
        final text2 = match.group(2)!;
        switch (text2) {
          case 'bold':
            return LinkAttribute(text1, style: boldStyle);
          case 'italic':
            return LinkAttribute(text1, style: italicStyle);
          case 'orange':
            return LinkAttribute(text1, style: orangeStyle);
          case 'big':
            return LinkAttribute(text1, style: bigStyle);
          default:
            if (text2.startsWith('http')) {
              return LinkAttribute(
                text1,
                link: text2,
                style: blueStyle,
                highlightedStyle: highlightedStyle,
              );
            } else {
              return LinkAttribute(text1);
            }
        }
      }
      return LinkAttribute(s);
    },
    onTap: (url) => launchUrl(Uri.parse(url)),
    onLongPress: (url) => Share.share(url),
  );
}

Categories

Emoji & Rich Text

Source repository

Projects using this package