[flutter] RichText에서 텍스트의 부분 부분을 클릭 이벤트 추가하기

22 Dec 2023

flutter

아래는 RichText에서 텍스트의 부분에 클릭 이벤트를 추가하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Clickable RichText Example')),
        body: Center(
          child: RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: 'Click ',
                  style: TextStyle(color: Colors.black),
                ),
                TextSpan(
                  text: 'here',
                  style: TextStyle(color: Colors.blue),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // Handle click event for 'here' text
                    },
                ),
                TextSpan(
                  text: ' to do something.',
                  style: TextStyle(color: Colors.black),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제 코드에서는 ‘here’ 텍스트에 대한 클릭 이벤트를 추가하였습니다. 클릭 가능한 텍스트 부분에는 recognizer 속성을 사용하여 TapGestureRecognizer()를 할당하여 클릭 이벤트를 처리할 수 있습니다.

이제 위의 예제 코드를 사용하여 RichText 위젯에서 텍스트의 부분에 클릭 이벤트를 추가할 수 있습니다.