README.md를 더 상세하게 작성해드리겠습니다.

# Highlightable Text

텍스트 하이라이트 기능과 메모 기능을 제공하는 Flutter 위젯입니다. 긴 텍스트에서 중요한 부분을 하이라이트하고 메모를 추가할 수 있습니다.

## 주요 기능

- 길게 누르기로 텍스트 하이라이트
- 다양한 하이라이트 색상 지원
- 하이라이트된 텍스트에 메모 추가
- 커스텀 메모 다이얼로그 지원
- 커스텀 메모 표시기 지원
- 스크롤 지원
- 초기 하이라이트 목록 지원

## 설치

pubspec.yaml에 다음을 추가하세요:

```yaml
dependencies:
  highlightable_text: ^0.0.1
```

기본 사용법

가장 기본적인 사용 예시:

HighlightableText(
  text: "하이라이트 기능을 테스트할 긴 텍스트...",
  onSaveNote: (highlight, note) {
    print('하이라이트된 텍스트: ${highlight.content}');
    print('메모: $note');
  },
)

고급 사용법

1. 하이라이트 상태 관리

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final List<Highlight> _highlights = [];
  Color _currentColor = Colors.yellow.withOpacity(0.3);

  @override
  Widget build(BuildContext context) {
    return HighlightableText(
      text: "긴 텍스트 내용...",
      initialHighlights: _highlights,
      selectedColor: _currentColor,
      onHighlight: (content, start, end) {
        print('새로운 하이라이트: $content');
      },
      onSaveNote: (highlight, note) {
        setState(() {
          final index = _highlights.indexWhere(
            (h) => h.startOffset == highlight.startOffset &&
                   h.endOffset == highlight.endOffset,
          );
          if (index != -1) {
            _highlights[index] = highlight.copyWith(note: note);
          }
        });
      },
    );
  }
}

2. 커스텀 메모 다이얼로그

태그 기능이 있는 커스텀 메모 다이얼로그 예시:

HighlightableText(
  text: "텍스트 내용...",
  noteBuilder: (context, highlight, onSave) {
    return CustomNoteDialog(
      highlight: highlight,
      onSave: onSave,
    );
  },
)

// 커스텀 다이얼로그 구현
class CustomNoteDialog extends StatefulWidget {
  final Highlight highlight;
  final OnSaveNoteCallback onSave;

  const CustomNoteDialog({
    required this.highlight,
    required this.onSave,
  });

  @override
  State<CustomNoteDialog> createState() => _CustomNoteDialogState();
}

class _CustomNoteDialogState extends State<CustomNoteDialog> {
  late TextEditingController _noteController;

  @override
  void initState() {
    super.initState();
    _noteController = TextEditingController(text: widget.highlight.note);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('메모'),
      content: TextField(
        controller: _noteController,
        maxLines: 3,
        decoration: const InputDecoration(
          hintText: '메모를 입력하세요',
          border: OutlineInputBorder(),
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('취소'),
        ),
        TextButton(
          onPressed: () => widget.onSave(
            widget.highlight,
            _noteController.text,
          ),
          child: const Text('저장'),
        ),
      ],
    );
  }
}

3. 커스텀 메모 표시기

HighlightableText(
  text: "텍스트 내용...",
  noteIndicatorBuilder: (highlight) => Padding(
    padding: const EdgeInsets.only(left: 4),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(
          Icons.note,
          size: 16,
          color: highlight.note?.isNotEmpty == true
              ? Colors.blue
              : Colors.grey[400],
        ),
        if (highlight.note?.isNotEmpty == true) ...[
          const SizedBox(width: 4),
          Container(
            padding: const EdgeInsets.symmetric(
              horizontal: 4,
              vertical: 2,
            ),
            decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: BorderRadius.circular(4),
            ),
            child: Text(
              '메모',
              style: TextStyle(fontSize: 10),
            ),
          ),
        ],
      ],
    ),
  ),
)

속성 설명

필수 속성

  • text: 표시할 텍스트 내용

선택 속성

  • textStyle: 기본 텍스트 스타일
  • highlightColors: 사용 가능한 하이라이트 색상 목록
  • initialHighlights: 초기 하이라이트 목록
  • selectedColor: 현재 선택된 하이라이트 색상
  • selectionOpacity: 선택 중일 때의 하이라이트 불투명도
  • scrollController: 스크롤 컨트롤러

콜백

  • onHighlight: 새로운 하이라이트 생성 시 호출
  • onHighlightTap: 하이라이트 탭 시 호출
  • onSaveNote: 메모 저장 시 호출

커스터마이징

  • noteBuilder: 커스텀 메모 다이얼로그 빌더
  • noteIndicatorBuilder: 커스텀 메모 표시기 빌더

라이선스

MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.

기여하기

버그를 발견하셨거나 새로운 기능을 제안하고 싶으시다면 이슈를 생성해주세요.

FAQ

Q: 하이라이트 색상을 동적으로 변경하려면 어떻게 해야 하나요?

Color _currentColor = Colors.yellow.withOpacity(0.3);

HighlightableText(
  text: "텍스트 내용...",
  selectedColor: _currentColor,
)

Q: 하이라이트된 텍스트의 위치로 스크롤하려면 어떻게 해야 하나요?

final scrollController = ScrollController();

HighlightableText(
  text: "텍스트 내용...",
  scrollController: scrollController,
)

// 스크롤 위치 이동
scrollController.animateTo(
  position,
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);


## 추가 예시

더 많은 예시는 `example` 폴더를 참조하세요.

## 버전 요구사항

- Flutter: >=3.0.0
- Dart: >=3.0.0
- 모든 플랫폼 지원 (iOS, Android, Web, Desktop)

이렇게 하면 사용자들이 라이브러리의 기능을 더 쉽게 이해하고 활용할 수 있을 것 같습니다. README에 더 추가하고 싶은 내용이 있다면 말씀해 주세요!

Libraries

highlightable_text