[flutter] RichText에서 텍스트의 특정 부분에 링크 추가하기

22 Dec 2023

flutter

Flutter 앱에서 RichText 위젯을 사용하면 텍스트 스타일을 다르게 지정하거나 특정 부분에 링크를 추가할 수 있습니다. RichText 위젯은 여러 개의 TextSpan을 조합하여 하나의 텍스트로 표시할 수 있습니다. 이를 활용하여 특정 부분에 링크를 포함한 텍스트를 만들어 볼 수 있습니다.

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(
              children: [
                TextSpan(
                  text: '이용 약관에 동의합니다. ',
                  style: TextStyle(color: Colors.black),
                ),
                TextSpan(
                  text: '약관',
                  style: TextStyle(color: Colors.blue),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // 링크 클릭 시 실행할 동작
                    },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 예제에서는 RichText 위젯을 사용하여 “이용 약관에 동의합니다.”와 “약관” 두 부분으로 텍스트를 나누었습니다. “약관” 부분에 파란색 텍스트 스타일을 적용하고 recognizer를 사용하여 탭 이벤트를 처리할 수 있는 링크를 추가했습니다.

결론

Flutter의 RichText 위젯을 사용하여 텍스트의 특정 부분에 링크를 추가하는 방법을 알아보았습니다. 코드를 통해 간단히 구현하여 사용자가 텍스트 일부분을 탭했을 때 동작을 수행하도록 할 수 있습니다.

이러한 기능을 활용하면 앱 내에서 텍스트 기반의 링크를 쉽게 표현할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.

참고문헌:

Flutter RichText 공식 문서: https://api.flutter.dev/flutter/widgets/RichText-class.html