[flutter] RichText에서 링크 추가하기

22 Dec 2023

flutter

Flutter에서 RichText 위젯을 사용하면 텍스트 스타일을 일부분만 변경하거나 상호작용 가능한 링크를 추가할 수 있습니다.

RichText 위젯 소개

RichText 위젯은 다양한 스타일을 적용할 수 있는 다중 텍스트 스팬을 표시할 수 있습니다. 이를 통해 복잡한 텍스트 스타일을 쉽게 처리할 수 있습니다.

RichText(
  text: TextSpan(
    text: 'This is a ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'link',
        style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // 링크 클릭 시 처리할 동작 작성
          },
      ),
      TextSpan(
        text: ' and this is normal text.',
      ),
    ],
  ),
)

위의 예제에서는 RichText 위젯을 사용하여 “link”라는 텍스트에 파란색 밑줄을 추가하고, 해당 텍스트를 클릭 가능한 링크로 만들었습니다.

텍스트에 링크 추가하기

RichText 위젯에서 텍스트에 링크를 추가하려면 GestureRecognizer를 이용하여 링크 클릭 시 처리할 동작을 설정하고, 해당 텍스트에는 링크 스타일을 적용합니다.

RichText(
  text: TextSpan(
    text: 'Visit our website',
    style: TextStyle(color: Colors.black),
    recognizer: TapGestureRecognizer()
      ..onTap = () {
        launch('https://www.example.com');
      },
  ),
)

위의 예제에서는 “Visit our website”라는 텍스트에 웹사이트 링크를 추가하고, 해당 텍스트를 클릭하면 해당 웹페이지로 이동하도록 설정하였습니다.

결론

RichText 위젯은 다양한 텍스트 스타일을 적용하고, 상호작용 가능한 링크를 쉽게 추가할 수 있는 강력한 도구입니다. 위의 예제를 참고하여 여러분만의 텍스트 링크를 만들어보세요!

참고 자료