[flutter] RichText에서 텍스트 하이퍼링크 추가하기

22 Dec 2023

flutter

RichText 위젯은 다양한 스타일 및 서식이 적용된 복잡한 텍스트를 만들 수 있게 해줍니다. 하지만 RichText위젯 안에 하이퍼링크를 추가하는 것은 조금 복잡할 수 있습니다.

다행히도, 우리는 GestureRecognizer와 TextSpan을 사용하여 RichText 위젯 안에서 하이퍼링크를 쉽게 추가할 수 있습니다.

아래는 간단한 예제입니다.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RichText(
            text: TextSpan(
              text: '이곳을 클릭하여 ',
              style: TextStyle(color: Colors.black),
              children: <TextSpan>[
                TextSpan(
                  text: '구글',
                  style: TextStyle(color: Colors.blue),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 구글 링크를 여는 코드 추가
                    },
                ),
                TextSpan(
                  text: '로 이동하세요.',
                  style: TextStyle(color: Colors.black),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 TextSpan의 recognizer 속성을 사용하여 하이퍼링크 기능을 추가합니다.

그런 다음 TapGestureRecognizer를 사용하여 특정 텍스트를 클릭했을 때의 동작을 정의할 수 있습니다.

더 복잡한 동작을 수행하도록하려면 Recognizer 클래스의 하위 클래스를 만들어 사용하거나, 기존 클래스를 확장하여 사용할 수도 있습니다.

하이퍼링크를 추가하는 방법은 상당히 유연하여 사용자가 편하게 원하는 대로 만들 수 있습니다.

이제 RichText 위젯 안에 텍스트 하이퍼링크를 추가하는 방법을 알아보았습니다.

링크와 관련된 자세한 내용은 flutter 공식 문서에서 확인할 수 있습니다.