패키지, 저장소 및 앱 카테고리 검색

패키지 상세v1.8.0

highlight_text

이 패키지를 사용하면 단어를 강조하고 특정 스타일과 작업을 만들 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
1.1만
좋아요
133
Pub 점수
150

패키지 설치

flutter pub add highlight_text

패키지 개요

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

highlight_text 패키지는 개발자가 텍스트 내 특정 단어를 강조하고 사용자 정의 스타일 및 상호작용 액션을 적용할 수 있도록 합니다. 특정 키워드에 시각적 강조나 기능이 필요한 리치 텍스트 표시에 적합합니다. 예를 들어 클릭 가능한 용어와 같은 경우입니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하여 크로스플랫폼 애플리케이션에 유연하게 활용할 수 있습니다. Flutter pub add를 통해 간단히 통합할 수 있으며, 동적 텍스트 상호작용을 통해 사용자 참여도를 높입니다.

사용 사례

  • 기사 내 키워드 강조
  • 인터랙티브 텍스트 요소 만들기
  • 검색 결과 미리보기 향상
  • 스타일링된 언급 또는 해시태그 표시
  • 풍부한 텍스트 편집기 만들기
  • 클릭 가능한 단어 작업 구현

주요 기능

  • 사용자 지정 가능한 하이라이트 스타일
  • 강조된 단어에 대한 탭 제스처 지원
  • 크로스 플랫폼 호환성
  • Flutter와의 간편한 통합
  • 유연한 텍스트 렌더링
  • 사용자 정의 가능한 하이라이트 색상 및 효과

적합한 대상

  • 콘텐츠 중심 앱
  • 교육용 애플리케이션
  • 인터랙티브 문서
  • 소셜 미디어 기능
  • 검색 및 필터 인터페이스
  • 사용자 생성 콘텐츠 플랫폼

고려 사항

  • 큰 텍스트 블록과 함께하는 성능 영향
  • 기본 사용자 정의 외에 내장 스타일 옵션이 제한적
  • 중첩된 위젯을 주의 깊게 다뤄야 합니다
  • 복잡한 상호작용을 위해 추가 로직이 필요할 수 있습니다
  • 실시간 공동 편집을 위한 최적화되지 않음
  • 중간 수준의 텍스트 복잡도에 가장 적합

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

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

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트