Buscar pacotes, repositórios e categorias de apps

Detalhes do pacotev1.8.0

highlight_text

Com este pacote, você pode destacar palavras e criar estilos e ações específicas.

AndroidiOSWebmacOSWindowsLinux
Downloads em 30 dias
11 mil
Curtidas
133
Pontos Pub
150

Instalar pacote

flutter pub add highlight_text

Visão geral do pacote

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

O pacote highlight_text permite aos desenvolvedores destacar palavras específicas em texto e aplicar estilos personalizados e ações interativas. É ideal para exibições de texto rico onde certas palavras-chave precisam de ênfase visual ou funcionalidade, como termos clicáveis. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, tornando-o versátil para aplicações multiplataforma. Com integração simples via Flutter pub add, ele aumenta o engajamento do usuário por meio de interações dinâmicas com o texto.

Casos de uso

  • Destacando palavras-chave em artigos
  • Criando elementos de texto interativos
  • Melhorando visualizações de resultados de pesquisa
  • Exibindo menções ou hashtags estilizadas
  • Construindo editores de texto rico
  • Implementando ações de palavras clicáveis

Principais recursos

  • Estilos de destaque personalizáveis
  • Suporte para gestos de toque em palavras destacadas
  • Compatibilidade multiplataforma
  • Integração fácil com o Flutter
  • Renderização flexível de texto
  • Cores e efeitos de destaque configuráveis

Indicado para

  • Aplicativos com conteúdo intenso
  • Aplicações educacionais
  • Documentação interativa
  • Funcionalidades de redes sociais
  • Interfaces de pesquisa e filtragem
  • plataformas de conteúdo gerado pelo usuário

Considerações

  • Impacto no desempenho com blocos de texto grandes
  • Opções de estilização internas limitadas além da personalização básica
  • Requer manipulação cuidadosa de widgets aninhados
  • Pode ser necessário lógica adicional para interações complexas
  • Não otimizado para edição colaborativa em tempo real
  • Mais adequado para complexidade moderada de texto

README original

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

Highlight Text Plugin

A flutter package to highlight words from a text.

Usage

To use this package, add highlight_text as a dependency in your pubspec.yaml file.

Getting Started

With this package you can highlight words and create specific actions for each highlighted word, you can customize the style of each word separately or create a unique style for all of them, you can also customize the style of the rest of the text.

Example

Import the highlight library

import 'package:highlight_text/highlight_text.dart';

You should use the HighlightedWord class to specify the dictionary words in a Map object

Map<String, HighlightedWord> words = {
    "Flutter": HighlightedWord(
        onTap: () {
            print("Flutter");
        },
        textStyle: textStyle,
    ),
    "open-source": HighlightedWord(
        onTap: () {
            print("open-source");
        },
        textStyle: textStyle,
    ),
    "Android": HighlightedWord(
        onTap: () {
            print("Android");
        },
        textStyle: textStyle,
    ),
};

Now you can call the TextHighlight widget

TextHighlight(
    text: text, // You need to pass the string you want the highlights
    words: words, // Your dictionary words
    textStyle: TextStyle( // You can set the general style, like a Text()
        fontSize: 20.0,
        color: Colors.black,
    ),
    textAlign: TextAlign.justify, // You can use any attribute of the RichText widget
),

Package example image

1.1.0 Update

Now you can customize better the words you highlight, just like a Container. It was added decoration and padding fields to HighlightedWord object, so you can do whatever you want to customize it.

HighlightedWord(
    onTap: () {},
    textStyle: textStyle,
    decoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.circular(50),
    ),
    padding: EdgeInsets.all(8.0),
),

1.2.0 Breaking changes

enableCaseSensitive renamed to matchCase to be clearer about what it does

TextHighlight(
    text: text,
    words: words,
    matchCase: true // will highlight only exactly the same string
),

Categorias

Repositório-fonte

Projetos que usam este pacote