Flutter에서 RichText() 위젯 사용하기

 

 

Flutter에서 다양한 텍스트 스타일을 적용하고 싶으신가요?

RichText 위젯이 여러분의 든든한 조력자가 될 것입니다!

이 가이드에서는 RichText 위젯을 사용하여 멋진 텍스트를 만드는 단계별 방법을 안내합니다.

 

1. RichText 위젯이란 무엇일까요?

RichText 위젯은 Flutter에서 텍스트에 다양한 스타일을 적용하는 데 사용되는 강력한 도구입니다.

글꼴, 색상, 크기, 정렬 등을 자유롭게 조정하여 풍부하고 매력적인 텍스트를 표현할 수 있습니다.

 

2. RichText 위젯 사용 단계

RichText 위젯을 사용하려면 다음과 같은 단계를 따르세요.

 

단계 1: TextSpan 클래스 사용하기

RichText 위젯은 TextSpan 클래스를 사용하여 텍스트에 스타일을 적용합니다. TextSpan 클래스는 텍스트 내용, 글꼴, 색상, 크기, 정렬 등 다양한 속성을 가질 수 있습니다.

TextSpan(
  text: 'TextSpan 예시입니다.',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
  ),
)

 

위 코드는 "TextSpan 예시입니다."라는 텍스트를 파란색, 20.0 크기, 굵게 표시합니다.

 

단계 2: TextSpan 리스트 만들기

여러 TextSpan 객체를 리스트에 담아 다양한 스타일을 가진 텍스트를 표현합니다.

List<TextSpan> textSpans = [
  TextSpan(text: 'Flutter에서 ', style: TextStyle(color: Colors.blue)),
  TextSpan(text: 'RichText ', style: TextStyle(fontWeight: FontWeight.bold)),
  TextSpan(text: '위젯 사용법을 알아보세요!'),
];

 

위 코드는 "Flutter에서 RichText 위젯 사용법을 알아보세요!"라는 텍스트를 표시합니다.

"Flutter에서" 부분은 파란색으로 표시되고, "RichText" 부분은 굵게 표시됩니다.

 

단계 3: RichText 위젯 생성하기

TextSpan 리스트를 RichText 위젯의 text 속성에 전달하여 RichText 위젯을 생성합니다.

RichText(
  text: TextSpan(
    children: textSpans,
  ),
)

 

3. RichText 위젯 옵션

RichText 위젯은 다양한 옵션을 제공하여 텍스트를 더욱 풍부하게 표현할 수 있도록 합니다.

주요 옵션은 다음과 같습니다.

• textAlign: 텍스트 정렬 방식을 설정합니다. (left, center, right, justify 등)
• textDirection: 텍스트 방향을 설정합니다. (ltr, rtl)
• locale: 텍스트에 적용할 로케일을 설정합니다.
• softWrap: 텍스트가 줄바꿈될지 여부를 설정합니다.
• overflow: 텍스트가 위젯 영역을 벗어날 경우 처리 방식을 설정합니다. (clip, ellipsis, visible 등)
• maxLines: 최대 표시되는 텍스트 줄 수를 설정합니다.
• strutStyle: 텍스트 행간 간격 및 높이를 설정합니다.
• textScaleFactor: 텍스트 크기 배율을 설정합니다.
• textHeightBehavior: 텍스트 높이 계산 방식을 설정합니다.

4. 예시 코드

다음은 RichText 위젯을 활용한 간단한 예시 코드입니다.

RichText(
  text: TextSpan(
    text: 'Flutter에서 ',
    style: TextStyle(color: Colors.blue),
    children: <TextSpan>[
      TextSpan(text: 'RichText ', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: '위젯 사용법을 알아보세요!'),
    ],
  ),
)

 

5. RichText 위젯 활용 실습

이제 단계별 가이드를 통해 RichText 위젯을 직접 사용해보며 멋진 문구를 만들어 보겠습니다!

 

5.1. 기본 문구 만들기

먼저, 다음 코드를 사용하여 기본적인 RichText 문구를 만들어 보세요.

RichText(
  text: TextSpan(
    text: '안녕하세요, ',
    style: TextStyle(color: Colors.blue),
    children: <TextSpan>[
      TextSpan(text: 'Flutter ', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: '개발 세계로 오세요!'),
    ],
  ),
)

 

결과

안녕하세요, Flutter 개발 세계로 오세요!

 

5.2. 스타일 추가하기

이제 위 문구에 더욱 풍성한 스타일을 추가해 보겠습니다.

RichText(
  text: TextSpan(
    text: '안녕하세요, ',
    style: TextStyle(color: Colors.blue, fontSize: 20.0),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter ',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 24.0,
          color: Colors.red,
        ),
      ),
      TextSpan(text: '개발 세계로 오세요!', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

 

변경 사항

• 기본 텍스트 크기를 20.0으로 설정했습니다.
• "Flutter" 텍스트를 굵게 표시하고 크기를 24.0으로, 색상을 빨간색으로 변경했습니다.
• "개발 세계로 오세요!" 텍스트를 기울임체로 표시했습니다.

결과

안녕하세요, Flutter 개발 세계로 오세요!

 

5.3. 이미지 추가하기

RichText 위젯은 이미지도 포함할 수 있습니다. 다음 코드를 사용하여 "Flutter" 로고 이미지를 텍스트 옆에 추가해 보세요.

RichText(
  text: TextSpan(
    text: '안녕하세요, ',
    style: TextStyle(color: Colors.blue, fontSize: 20.0),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter ',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 24.0,
          color: Colors.red,
        ),
      ),
      WidgetSpan(
        child: Image.asset('assets/flutter_logo.png', width: 30.0, height: 30.0),
      ),
      TextSpan(text: ' 개발 세계로 오세요!', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

 

변경 사항

• WidgetSpan을 사용하여 "Flutter" 로고 이미지를 추가했습니다.
• 이미지의 너비와 높이를 설정했습니다.

결과

안녕하세요, Flutter [Flutter 로고 이미지] 개발 세계로 오세요!

 

5.4. 상호 작용 추가하기

RichText 위젯은 텍스트 일부에 터치 이벤트를 추가하여 상호 작용 기능을 구현할 수 있습니다.

다음 코드를 사용하여 "Flutter" 텍스트를 터치하면 Flutter 공식 웹사이트로 이동하도록 해 보겠습니다.

RichText(
  text: TextSpan(
    text: '안녕하세요, ',
    style: TextStyle(color: Colors.blue, fontSize: 20.0),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter ',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 24.0,
          color: Colors.red,
          recognizer: TapGestureRecognizer()..onTap = () {
            launchUrl('https://flutter.dev');
          },
        ),
      ),
      TextSpan(text: ' 개발 세계로 오세요!', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

 

6. 마무리

Flutter RichText 위젯은 다양한 텍스트 스타일을 적용하여 멋진 디자인을 구현할 수 있는 강력한 도구입니다.

이 블로그를 통해 RichText 위젯의 기본 사용법과 옵션을 이해하셨기를 바랍니다.

궁금한 점은 언제든지 질문해주세요!