[Flutter] 유튜브 해시태그 대댓글 기능 만들기

오늘의 주제는 유튜브에서 사용하는 해시태그 기능을 만들는 방법이다. 유튜브의 대댓글 페이지에서는 대댓글을 클릭하여 대댓글을 단 유저를 태그할 수 있다. 오늘은 이 기능에 대해 개발을 진행해보려 한다.

유튜브 대댓글 화면 유튜브 채널 - 뜬뜬

목표

위의 유튜브의 대댓글 페이지에서 볼 수 있는 아래의 두 가지 기능을 구현한다.

1. 다른 사람이 쓴 댓글을 누르면 해당 유저가 태그 됨.
2. 키보드의 백스페이스(뒤로가기)키로 태그가 지워짐.

백스페이스키로 태그(위젯, 텍스트)가 지워지게 만드는 게 핵심이다. 어떻게 해야할까?

개발

일단 페이지를 비슷하게 만들어본다.

그리고 답글추가버튼 혹은 대댓글을 누르면 댓글 창이 활성화 되도록 구현한다.

이제 <목표>의 요구사항을 만족하는 기능을 구현해야한다.

여러가지 방법이 있을 수 있겠지만, 입력폼에 사용될 TextEditingController를 오버라이드하여 해시태그 기능을 만들 것이다.

class TagTextEditingController extends TextEditingController {
  static String matchKey = '\uffff';
  String? tag;
  TagTextEditingController({
    String? text,
  }) : super.fromValue(text == null ? TextEditingValue.empty : TextEditingValue(text: text));

  setTag(String? mention) {
    text = '$matchKey ';
    this.tag = tag;
  }

  String get content => text.replaceAll(matchKey, '').trim();

  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    if (text.contains(matchKey)) {
      return TextSpan(
        children: [
          TagWidgetSpan(tag: tag),
          TextSpan(text: ' $content'),
        ],
        style: style,
      );
    }

    return TextSpan(text: text, style: style);
  }
}

TextEditingController의 buildTextSpan함수를 오버라이드하였다.
텍스트에 \uffff의 유니코드가 포함되어 있을 경우 태그를 포함한 TextSpan을 반환하고, 그게 아닐경우 기본 TextSpan을 반환한다.

여기서 '\uffff'는, 유니코드의 마지막 값인 65,535이다. 특정 애플리케이션에서 문자열의 끝을 표시하기 위해 사용될 수 있지만, 일반적으로 사용되지 않는다. 일반적으로 사용되지도 않고, 사용자가 입력을 할 수도 없는 유니코드이기 때문에 text에 이 유니코드가 포함되어 있는지에 따라서 태그의 유무를 판단한다.

setTag()함수를 다른 댓글 타일을 누를 때, 호출하여 tag를 설정한다.

/// TagTextEditingController tec;
///...
ReplyTile(
    data: reply,
    onTap: () {
      tec.setTag(reply.userName);
    },
),

백스페이스로 텍스트를 지울 때는 유니코드가 지워지기 때문에 태그가 사라지게 된다.

대댓글을 눌러 특정 유저 태그하기

백스페이스로 태그 지우기

결론

오늘은 유튜브의 해시태그 기능을 TextEditingController를 오버라이드하여 구현해보았다. 해당 기능을 구현하기 위해서 여러가지 방법이 있었겠지만, 뒤로가기 키로 지워지기 위해서 해당 방법을 선택하였다.