패키지 상세v2.6.0

selectable_autolink_text

Flutter용으로 텍스트 내에서 선택하고 탭할 수 있는 인라인 링크를 생성합니다.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 1.2만
좋아요: 84
Pub 점수: 140

패키지 설치

flutter pub add selectable_autolink_text

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

텍스트 내에서 선택 가능하고 탭 가능한 인라인 링크를 생성할 수 있도록 해주는 플러터 패키지입니다. 문자열 내의 URL, 이메일 주소, 전화번호를 자동으로 감지하여 텍스트 선택 기능을 유지하면서 상호작용 가능한 요소로 렌더링합니다. 사용자가 임베디드 링크와 상호작용할 수 있지만 텍스트 복사 또는 강조 표시 기능을 잃지 않는 리치 텍스트 표시에 적합합니다. 이 패키지는 안드로이드, iOS, 웹, macOS, Windows, 리눅스 등 여러 플랫폼을 지원합니다.

사용 사례

클릭 가능한 링크를 포함한 리치 텍스트 표시
링크된 콘텐츠에서 텍스트 선택 활성화
상호작용형 채팅 또는 메시지 인터페이스 만들기
앱 텍스트에 연락처 정보 포함하기
사용자 생성 콘텐츠를 자동 링크로 지원

주요 기능

URL, 이메일 및 전화번호 자동 감지
텍스트 선택 및 복사 유지
사용자 지정 가능한 링크 스타일
크로스 플랫폼 호환성
Text 위젯과의 간단한 통합
링크 위의 탭 제스처를 지원합니다

적합한 대상

채팅 애플리케이션
소셜 미디어 피드
문서 뷰어
사용자 프로필 설명
동적 텍스트를 갖춘 콘텐츠가 풍부한 UI

고려 사항

일관된 외관을 위해 추가 스타일링이 필요할 수 있습니다
큰 텍스트 블록과 성능 영향
비표준 링크 패턴에 대한 제한된 사용자 정의
접근성 레이블을 주의 깊게 다뤄야 합니다
링크를 제외한 복잡한 리치 텍스트 형식 지정에는 적합하지 않습니다

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