RichText 위젯을 사용하여 텍스트 레이아웃을 설정하는 방법을 알아보겠습니다.

RichText 위젯 생성하기

RichText 위젯을 생성하려면 RichText 위젯을 반환하는 StatelessWidget을 만들어야 합니다.

import 'package:flutter/material.dart';

class MyRichText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
          TextSpan(text: ' and ', style: TextStyle(color: Colors.blue)),
          TextSpan(
              text: 'Flutter',
              style: TextStyle(fontStyle: FontStyle.italic)),
        ],
      ),
    );
  }
}

위의 코드에서는 RichText 위젯을 사용하여 “Hello world and Flutter”라는 텍스트를 보여주는 MyRichText 위젯을 생성합니다.

RichText의 TextSpan 속성

RichText의 text 속성은 TextSpan을 사용하여 설정됩니다. TextSpan은 텍스트의 일부 또는 전부에 대한 스타일을 정의합니다.

• text: 텍스트 내용을 지정합니다.
• style: 텍스트 스타일을 지정합니다.
• children: 다른 TextSpan을 포함하는 목록으로, 여러 텍스트 스타일을 결합할 때 사용됩니다.

요약

RichText 위젯을 사용하여 여러 가지 스타일의 텍스트를 하나의 위젯으로 표현할 수 있습니다. TextSpan을 사용하여 각각의 텍스트 스타일을 설정하고, RichText 위젯에 적용하여 다양한 텍스트 레이아웃을 만들 수 있습니다.

이상으로 Flutter의 RichText 위젯을 사용하여 텍스트 레이아웃을 설정하는 방법에 대해 알아보았습니다.

참고 문헌: Flutter - RichText class