Flutter 애플리케이션에서 사용자가 입력하는 텍스트 중 특정 부분을 강조하는 기능은 사용자 경험을 개선하는 데 매우 유용합니다. 특히 소셜 미디어와 같은 앱에서 해시태그(hashtag)를 강조하는 것은 필수적입니다. 이번 글에서는 Flutter의 TextEditingController를 확장하여 해시태그를 자동으로 감지하고, 해당 부분을 강조하는 커스텀 컨트롤러를 만드는 방법을 소개합니다.
CustomTagController란?
CustomTagController는 TextEditingController를 상속받아, 사용자가 입력하는 텍스트 중 해시태그(#)가 포함된 부분을 감지하여 색상을 변경하는 역할을 합니다. 사용자가 텍스트 필드에 해시태그를 입력하면, 해당 부분이 자동으로 스타일링되어 다른 텍스트와 구분되도록 합니다.
아래는 CustomTagController의 전체 구현 코드입니다.
import 'package:flutter/material.dart';
class CustomTagController extends TextEditingController {
@override
TextSpan buildTextSpan({
required BuildContext context,
TextStyle? style,
required bool withComposing,
}) {
final TextStyle defaultStyle =
style ?? const TextStyle(color: Colors.black, fontSize: 16);
final TextStyle hashtagStyle = defaultStyle.copyWith(color: Colors.blue);
List<TextSpan> children = [];
final RegExp regex = RegExp(r'(\s+|#\w+|\S+)');
final Iterable<Match> matches = regex.allMatches(text);
for (final Match match in matches) {
final String word = match.group(0)!;
if (word.startsWith('#') && word.length > 1) {
children.add(TextSpan(text: word, style: hashtagStyle));
} else {
children.add(TextSpan(text: word, style: defaultStyle));
}
}
return TextSpan(style: defaultStyle, children: children);
}
}코드 설명
-
TextEditingController 확장
Flutter에서 텍스트 필드를 제어하려면 TextEditingController를 사용합니다. 이를 확장하여 CustomTagController를 만들면, 기본 텍스트 입력 기능을 유지하면서 커스텀 로직을 추가할 수 있습니다. -
buildTextSpan 메서드 오버라이드
buildTextSpan 메서드는 텍스트 필드에 표시될 텍스트의 스타일을 정의합니다. 이 메서드를 오버라이드하여 텍스트 중 해시태그가 포함된 부분에 다른 스타일을 적용할 수 있습니다.
defaultStyle: 기본 텍스트 스타일입니다. 스타일이 지정되지 않은 경우, 기본적으로 검은색 텍스트에 크기는 16으로 설정됩니다.
hashtagStyle: 해시태그에 적용될 스타일입니다. 기본 스타일을 기반으로 색상만 파란색으로 변경합니다.
3. 정규 표현식(RegExp) 사용
RegExp(정규 표현식)를 사용하여 입력된 텍스트에서 해시태그를 찾습니다. 정규 표현식 r'(\s+|#\w+|\S+)'은 공백, 해시태그, 그 외의 텍스트를 매칭합니다.
공백 (\s+): 연속된 공백을 매칭합니다.
해시태그 (#\w+): #로 시작하고 그 뒤에 단어 문자가 오는 패턴을 매칭합니다.
그 외 텍스트 (\S+): 공백을 제외한 모든 텍스트를 매칭합니다.
4. TextSpan을 사용한 스타일 적용
각 단어를 TextSpan으로 감싸고, 해시태그인 경우 hashtagStyle을, 그렇지 않은 경우 defaultStyle을 적용합니다. 최종적으로 모든 TextSpan을 리스트에 추가하여, RichText 위젯에서 사용할 수 있도록 합니다.
사용 예제
이제 CustomTagController를 실제로 어떻게 사용할 수 있는지 살펴보겠습니다. 아래는 간단한 예제입니다.
import 'package:flutter/material.dart';
import 'package:your_package_name/custom_tag_controller.dart'; // CustomTagController를 import하세요.
class HashtagTextFieldExample extends StatelessWidget {
final CustomTagController _controller = CustomTagController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hashtag TextField Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Type something with #hashtags',
border: OutlineInputBorder(),
),
),
),
);
}
}
void main() => runApp(MaterialApp(home: HashtagTextFieldExample()));
결론
이 글에서는 Flutter에서 해시태그를 강조하는 CustomTagController를 만드는 방법을 소개했습니다. 이 컨트롤러를 사용하면, 텍스트 필드에서 사용자가 입력하는 해시태그를 자동으로 감지하여 스타일을 적용할 수 있습니다. 이 기능은 소셜 미디어 앱이나 텍스트 입력에서 특정 키워드를 강조할 필요가 있는 애플리케이션에 매우 유용할 것입니다.
Flutter의 강력한 텍스트 처리 기능을 활용하여 사용자에게 더욱 향상된 경험을 제공해 보세요!
