套件詳情v2.6.0

selectable_autolink_text

為 Flutter 生成可選擇和點擊的內嵌連結。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 1.2萬
喜歡數: 84
Pub 分數: 140

安裝套件

flutter pub add selectable_autolink_text

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，可實現文字中可選擇與可點擊的內嵌連結。它會自動偵測字串中的 URL、電子郵件和電話號碼，並以互動式元件呈現，同時保留文字選取功能。非常適合需要使用者與嵌入式連結互動，卻又不失去複製或標示文字能力的豐富文字顯示情境。此套件支援 Android、iOS、Web、macOS、Windows 與 Linux 多個平台。

適用情境

顯示帶有可點擊連結的富文本
在連結內容中啟用文字選擇
建立互動式聊天或訊息介面
在應用文字中嵌入聯絡資訊
支援使用者產生內容的自動連結

主要特色

自動偵測網址、電子郵件和電話號碼
保留文字選擇與複製
可自訂的連結樣式
跨平台相容性
與 Text 小部件的簡單整合
支援連結上的輕觸手勢

適合對象

聊天應用
社群媒體動態
文件查看器
使用者個人檔案描述
內容豐富的使用者介面，具有動態文字

使用建議

可能需要額外的樣式以保持外觀一致
大文本塊的性能影響
對非標準連結模式的自訂有限
需要仔細處理可存取性標籤
不適用於複雜的富文字格式，僅限於連結

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Selectable Autolink Text

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),
  );
}