본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 텍스트의 특정 부분을 클릭 가능하게 만드는 방법 [중복], Make specific parts of a text clickable in flutter [duplicate]

by 베타코드 2023. 8. 14.
반응형

질문


일부 텍스트를 탭할 수 있도록 만들어 해당 텍스트에 대한 함수를 호출하고 싶습니다. 또한 탭 가능한 텍스트의 스타일을 제어하고 싶습니다. 가장 좋은 경우에는 탭 영역의 크기를 42px로 늘릴 수도 있습니다.

enter image description here

이미 flutter_linkify와 linkify를 살펴보았지만, 제가 원하는 것은 아닙니다. 혹시 이미 패키지로 제공되거나 플러터 라이브러리에 내장되어 있는지 궁금합니다.


답변


Use RichText with TextSpan and GestureRecognizer. With GestureRecognizer you can detect tap, double tap, long press and etc.

Widget build(BuildContext context) {
    TextStyle defaultStyle = TextStyle(color: Colors.grey, fontSize: 20.0);
    TextStyle linkStyle = TextStyle(color: Colors.blue);
    return RichText(
      text: TextSpan(
        style: defaultStyle,
        children: <TextSpan>[
          TextSpan(text: '회원 가입을 클릭하여 당사의 '),
          TextSpan(
              text: '서비스 약관',
              style: linkStyle,
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('서비스 약관"');
                }),
          TextSpan(text: '에 동의하고 당사의 '),
          TextSpan(
              text: '개인 정보 보호 정책',
              style: linkStyle,
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('개인 정보 보호 정책"');
                }),
        ],
      ),
    );
  }

이미지 설명 입력 여기

반응형

댓글