[flutter] RichText에서 텍스트 줄 간격 조절하기

Flutter 앱을 개발할 때 RichText 위젯을 사용하여 다양한 텍스트 스타일을 적용하고 텍스트를 보다 자세히 제어할 수 있습니다. 그러나 기본적으로 RichText는 텍스트의 줄 간격을 제어할 수 없습니다. 따라서, RichText 위젯을 사용하여 텍스트의 줄 간격을 조절하는 방법에 대해 알아보겠습니다.

1. RichText 위젯 이해

먼저, RichText 위젯이 무엇인지 간단히 살펴보겠습니다. RichText 위젯은 여러 스타일이 적용된 다중 텍스트를 표시하는 데 사용됩니다. TextSpan을 사용하여 여러가지 텍스트 스타일을 함께 표시할 수 있습니다.

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

2. 텍스트 줄 간격 조절하기

RichText 위젯에서 텍스트의 줄 간격을 조절하려면 TextSpan의 recognizer 프로퍼티를 활용할 수 있습니다. 아래와 같이 recognizer 프로퍼티에 TapGestureRecognizer를 활용하여 줄 간격을 조절할 수 있습니다.

import 'package:flutter/gestures.dart';

RichText(
  text: TextSpan(
    text: 'Hello\n',
    style: TextStyle(color: Colors.black, height: 1.5), // 줄 간격 설정
    recognizer: TapGestureRecognizer()..onTap = () {}, // 빈 제스처 추가
    children: <TextSpan>[
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

위의 예시에서 style 속성에 height를 통해 줄 간격을 조절할 수 있습니다.

결론

RichText 위젯을 활용하여 다중 텍스트 스타일을 적용하고, TapGestureRecognizer를 사용하여 텍스트의 줄 간격을 조절할 수 있습니다. 이를 통해 개발자는 디자인 및 사용자 경험에 더 많은 제어를 할 수 있게 됩니다.

더 자세한 내용은 Flutter 공식 문서를 참고하세요.