Flutter에서 RichText를 사용해 다양한 텍스트 스타일링 적용하기

Flutter는 텍스트 스타일링을 지원하는 RichText 위젯을 제공합니다. RichText를 사용하면 텍스트의 서로 다른 부분에 서로 다른 스타일을 적용할 수 있습니다. 예를 들어, 서로 다른 색상, 글꼴 크기 및 글꼴 스타일을 사용할 수 있습니다. 이를 통해 더욱 다양하고 풍부한 텍스트 효과를 적용할 수 있습니다.

다음은 Flutter에서 RichText를 사용하는 예시 코드입니다. 이 예시 코드에서는 두 개의 TextSpan을 RichText 위젯에 추가하고 각각 서로 다른 스타일을 적용합니다.

RichText(
  text: TextSpan(
    text: 'Flutter is ',
    style: TextStyle(
      color: Colors.black,
      fontSize: 20.0,
      fontWeight: FontWeight.bold,
    ),
    children: <TextSpan>[
      TextSpan(
        text: 'awesome',
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(
          color: Colors.black,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
);

이 예시 코드에서는 RichText 위젯을 생성하고, text 속성을 설정하여 TextSpan 객체를 전달합니다. TextSpan 객체는 첫 번째 TextSpan에는 “Flutter is”라는 텍스트를 나타내는 TextStyle 객체를 포함하고, 두 번째 TextSpan에는 “awesome”라는 텍스트를 나타내는 TextStyle 객체를 포함합니다.

첫 번째 TextSpan의 TextStyle 객체는 글꼴 크기가 20, 굵은 글꼴, 검은색 텍스트로 설정됩니다. 두 번째 TextSpan의 TextStyle 객체는 파란색으로 텍스트를 강조하고 밑줄을 추가합니다.

RichText 위젯은 이 두 개의 TextSpan을 결합하여 “Flutter is awesome!”라는 텍스트를 나타냅니다. 결과적으로, “Flutter is”는 검은색 굵은 글꼴로 표시되고, “awesome”는 파란색 밑줄로 강조된 텍스트로 표시됩니다. 마지막으로, 끝에는 다시 검은색 굵은 글꼴로 된 느낌표가 있습니다.

답글 남기기 응답 취소