[flutter] RichText에서 텍스트의 특정 부분에 입력 기능 추가하기

22 Dec 2023

flutter

Flutter의 RichText를 사용하여 텍스트 스타일을 유연하게 지정할 수 있습니다. 하지만 RichText에서 사용자가 특정 부분에 입력 기능(텍스트 필드)을 추가하려면 어떻게 해야 할까요?

1. 커스텀 위젯 만들기

특정 부분에 입력 기능을 추가하려면 해당 부분을 커스텀 위젯으로 만들어야 합니다. 여기에는 TextSpan과 함께 GestureDetector를 사용하여 특정 텍스트를 감지하고 터치 이벤트를 처리할 수 있는 위젯을 만드는 과정이 포함됩니다.

class InputTextSpan extends StatelessWidget {
  final String text;
  final Function onTap;

  InputTextSpan({required this.text, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Text(text), // 원하는 스타일과 텍스트로 변경
      onTap: onTap,
    );
  }
}

2. RichText와 결합하기

작성한 InputTextSpan을 RichText 안에서 사용하면 됩니다.

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: '일반 텍스트 ',
        style: TextStyle(color: Colors.black),
      ),
      InputTextSpan(
        text: '클릭 가능한 텍스트',
        onTap: () {
          // 특정 텍스트를 클릭했을 때의 동작
        },
      ),
    ],
  ),
);

위와 같이 InputTextSpan을 사용하여 RichText 안에서 특정 부분에 입력 기능을 추가할 수 있습니다.

3. 추가 기능

이 방법을 확장하여 클릭한 부분에 따라 다른 입력 기능을 제공할 수도 있습니다. 예를 들어, 클릭한 영역에 따라 다른 종류의 텍스트 입력 필드를 보여줄 수 있습니다.

Flutter에서 TextSpan과 GestureDetector를 활용하여 텍스트의 특정 부분에 입력 기능을 추가하는 방법을 알아보았습니다. 이를 응용하여 다양한 사용자 상호작용을 구현할 수 있을 것입니다.