RichText
위젯은 Flutter에서 복잡한 스타일링이 적용된 텍스트를 표시하기 위해 사용됩니다. TextSpan
위젯을 사용하여 다양한 스타일의 텍스트 조각들을 결합하여 하나의 텍스트로 표시할 수 있습니다.
RichText
위젯을 만듭니다.text
속성에 TextSpan
을 지정합니다.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"라는 텍스트를 굵은 글씨와 파란색으로 표시하고, 마지막으로 "는 정말 재미있습니다!"라는 텍스트를 추가로 표시합니다.
이렇게 RichText
와 TextSpan
을 사용하면 하나의 텍스트 블록 내에서 여러 스타일을 조합하여 복잡한 텍스트 스타일링을 구현할 수 있습니다.
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
의 값을 연속해서 표시합니다. 첫 번째와 두 번째 텍스트는 기본적인 스타일을 가지고, 마지막 텍스트는 회색 계열의 글씨로 표시됩니다.