Detalhes do pacotev2.6.0

selectable_autolink_text

Gere links embutidos que podem ser selecionados e tocados no texto para o Flutter.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 12,4 mil
Curtidas: 84
Pontos Pub: 140

Instalar pacote

flutter pub add selectable_autolink_text

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter que permite a criação de links inline selecionáveis e clicáveis dentro do texto. Ele detecta automaticamente URLs, emails e números de telefone em uma string e os renderiza como elementos interativos, preservando as capacidades de seleção de texto. Ideal para exibições de texto rico onde os usuários precisam interagir com links embutidos sem perder a capacidade de copiar ou destacar o texto. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Exibindo texto rico com links clicáveis
Habilitar seleção de texto em conteúdo vinculado
Criando interfaces interativas de bate-papo ou mensagens
Incorporar detalhes de contato no texto do aplicativo
Apoiar conteúdo gerado pelo usuário com links automáticos

Principais recursos

Detecta automaticamente URLs, emails e números de telefone
Preserva a seleção e cópia de texto
Estilo de link personalizável
Compatibilidade multiplataforma
Integração simples com widgets Text
Suporta gestos de toque em links

Indicado para

Aplicativos de bate-papo
feeds de redes sociais
Visualizadores de documentação
Descrições de perfil do usuário
Interfaces de usuário ricas em conteúdo com texto dinâmico

Considerações

Pode exigir estilos adicionais para aparência consistente
Impacto no desempenho com blocos de texto grandes
Personalização limitada para padrões de link não padrão
Requer manipulação cuidadosa de rótulos de acessibilidade
Não adequado para formatação de texto rico complexa além de links

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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