Paketdetailsv2.6.0

selectable_autolink_text

Erstellen Sie Inline-Links, die im Text ausgewählt und angeklickt werden können für Flutter.

AndroidiOSWebmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 12.400
Likes: 84
Pub-Punkte: 140

Paket installieren

flutter pub add selectable_autolink_text

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das die Erstellung auswählbarer und anklickbarer Inline-Links innerhalb von Texten ermöglicht. Es erkennt automatisch URLs, E-Mails und Telefonnummern in einer Zeichenkette und rendert sie als interaktive Elemente, wobei die Textauswahl-Funktion erhalten bleibt. Ideal für reichhaltige Textanzeigen, bei denen Benutzer mit eingebetteten Links interagieren müssen, ohne die Möglichkeit zum Kopieren oder Hervorheben von Text zu verlieren. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux.

Anwendungsfälle

Reichhaltigen Text mit klickbaren Links anzeigen
Textauswahl in verknüpften Inhalten aktivieren
Erstellen interaktiver Chat- oder Nachrichten-Schnittstellen
Kontaktdaten in App-Text einbetten
Unterstützung von nutzergeneriertem Inhalt mit automatischen Links

Hauptmerkmale

Ermittelt automatisch URLs, E-Mails und Telefonnummern
Behält Textauswahl und Kopieren bei
Anpassbare Link-Stilisierung
Plattformübergreifende Kompatibilität
Einfache Integration mit Text-Widgets
Unterstützt Tipptasten-Gesten auf Links

Geeignet für

Chat-Anwendungen
Soziale Medien-Feeds
Dokumentationsansicht
Benutzerprofilbeschreibungen
Inhaltsreiche Benutzeroberflächen mit dynamischen Texten

Hinweise

Kann zusätzliche Stilisierung erfordern, um ein konsistentes Erscheinungsbild zu gewährleisten
Leistungsbeeinträchtigung bei großen Textblöcken
Eingeschränkte Anpassungsmöglichkeiten für nicht-standardmäßige Link-Muster
Erfordert sorgfältige Behandlung von Zugänglichkeitsbezeichnungen
Nicht geeignet für komplexe Rich-Text-Formatierungen außerhalb von Links

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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