RichText

샤워실의 바보·2024년 2월 11일
0
post-thumbnail

RichText 위젯은 Flutter에서 복잡한 스타일링이 적용된 텍스트를 표시하기 위해 사용됩니다. TextSpan 위젯을 사용하여 다양한 스타일의 텍스트 조각들을 결합하여 하나의 텍스트로 표시할 수 있습니다.

사용 방법:

  1. RichText 위젯을 만듭니다.
  2. text 속성에 TextSpan을 지정합니다.
  3. 필요에 따라 TextSpan 내부에 다른 TextSpan들을 children 속성으로 추가하여 중첩 구조를 만듭니다.

예시:

RichText(
  text: TextSpan(
    text: '안녕하세요, ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      TextSpan(text: '는 정말 재미있습니다!'),
    ],
  ),
)

위의 예시에서는 기본 텍스트 "안녕하세요, "에 이어 "Flutter"라는 텍스트를 굵은 글씨와 파란색으로 표시하고, 마지막으로 "는 정말 재미있습니다!"라는 텍스트를 추가로 표시합니다.

이렇게 RichTextTextSpan을 사용하면 하나의 텍스트 블록 내에서 여러 스타일을 조합하여 복잡한 텍스트 스타일링을 구현할 수 있습니다.

title: RichText(
  text: TextSpan(
    text: "Account updates:",
    style: const TextStyle(
      fontWeight: FontWeight.w600,
      color: Colors.black,
      fontSize: Sizes.size16,
    ),
    children: [
      const TextSpan(
        text: " Upload longer videos",
        style: TextStyle(
          fontWeight: FontWeight.normal,
        ),
      ),
      TextSpan(
        text: " $notification",
        style: TextStyle(
          fontWeight: FontWeight.normal,
          color: Colors.grey.shade500,
        ),
      ),
    ],
  ),
),

이 코드는 "Account updates:"라는 텍스트를 강조하며, 그 다음에 "Upload longer videos"라는 텍스트와 변수 $notification의 값을 연속해서 표시합니다. 첫 번째와 두 번째 텍스트는 기본적인 스타일을 가지고, 마지막 텍스트는 회색 계열의 글씨로 표시됩니다.

profile
공부하는 개발자

0개의 댓글