flutter

Flutter[플러터] / RichText 를 사용하여 텍스트 개별 조절하기 (문단, Text.rich, 문장) (Flutter Widget of the Week)

ch5c 2025. 5. 29. 23:32
반응형

RichText class

풍부한 텍스트로 구성된 문단입니다.

RichText 위젯 은 여러 스타일을 사용하는 텍스트를 표시합니다. 표시할 텍스트는 TextSpan 객체 트리를 통해 정의되며 , 각 객체에는 해당 하위 트리에 사용되는 연관된 스타일이 있습니다. 레이아웃 제약 조건에 따라 텍스트는 여러 줄에 걸쳐 표시되거나 모두 한 줄에 표시될 수 있습니다.

RichText 위젯 에 표시되는 텍스트에는 명시적으로 스타일을 지정해야 합니다. 사용할 스타일을 선택할 때는 현재 BuildContext의 DefaultTextStyle을 사용하여 기본값을 제공하는 것이 좋습니다. RichText 위젯 에서 텍스트 스타일을 지정하는 방법에 대한 자세한 내용은 TextStyle 설명서를 참조하세요.

Text 위젯을 사용하여 DefaultTextStyle 과 자동으로 통합하는 것을 고려해 보세요. 모든 텍스트가 동일한 스타일을 사용하는 경우 기본 생성자가 덜 복잡해집니다. Text.rich 생성자를 사용하면 여러 스팬에 기본 텍스트 스타일을 적용하면서도 스팬별로 지정된 스타일을 적용할 수 있습니다.

https://youtu.be/rykDVh-QFfw

공식 문서 코드

 

RichText 는 여러 스타일을 혼합하여 하나의 텍스트 블록으로 표현할 수 있게 해주는 위젯이다. 쉽게 말해 한 문단이 있다고 하면 이제 Text 만으로는 그 문단, 문장에서 어떠한 한 부분만 bold 처리를 하거나 색을 바꿀 수 없는 소리이다. 하지만 RichText 를 사용하면 그런 문제를 해결할 수 있다. 한번 간단히 알아보자.

하위 속성
속성명 타입 기본값 설명
text InlineSpan – 표시할 리치 텍스트 내용으로 필수 입력 항목
textAlign TextAlign TextAlign.start 텍스트의 수평 정렬 방식
textDirection TextDirection? null 텍스트 방향을 지정하며 Directionality에서 상속 가능
softWrap bool true 텍스트가 박스를 넘을 경우 줄바꿈 여부
overflow TextOverflow TextOverflow.clip 텍스트가 넘칠 경우 처리 방식
textScaler TextScaler TextScaler.noScaling 텍스트 스케일을 제어하는 새로운 방식
maxLines int? null 최대 줄 수를 제한하며 초과 시 overflow 방식으로 처리
locale Locale? null 문자의 지역 설정으로 폰트 선택에 영향을 줌
strutStyle StrutStyle? null 줄 높이와 관련된 스타일 설정
textWidthBasis TextWidthBasis TextWidthBasis.parent 텍스트 너비 계산 기준 설정
textHeightBehavior TextHeightBehavior? null 줄 간격 계산 방식 제어
selectionRegistrar SelectionRegistrar? null 텍스트 선택을 위한 등록자, selectionColor와 함께 사용
selectionColor Color? null 텍스트 선택 시 강조 색상

 

하위 속성이 좀 많은데 그냥 Text 속성 따왔다고 생각하면 편하다. 우리가 봐야 할 부분은 정말 심플한데 바로 text 부분이다.

이 하위 속성에는 보통 TextSpan 을 넣어서 사용하게 되는데 TextSpan 에는 children 이 있고 이제 그 안에서 html 작성하는 것처럼 구성하면 된다.

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Hello '),
      TextSpan(
        text: 'bold',
        style: TextStyle(fontWeight: FontWeight.bold,),
      ),
      TextSpan(text: ' world!'),
    ],
  ),
),

정말 정말 간단하다. RichText 를 먼저 사용해 주고 그 하위 속성인 text 에는 TextSpan 을 사용해 준다.

이제 그 TextSpan 안에서 children 을 사용해 주고 이제 그 안에서 아까 언급했듯이 그냥 쓰고 싶은 거 TextSpan 으로 선언한 후 사용해 주면 되는 것이다. RichText 의 바로 하위에 위치해 있는 TextSpan 을 Row 라고 생각하면 편하다. 그냥 Row 안에서 Text 로 선언하는 느낌인데 이제 위젯을 배치하는 게 아니라 오직 텍스트만 배치하는 것이다.

이제 솔직히 설명할 것이 진짜로 없다. 왜냐하면 나머지 하위 속성들은 Text 랑 똑같기 때문이다. 그리고 이제 사실 나는 RichText 보다는 Text.rich 로 Text 의 생성자로 선언되어 있는 RichText 를 애용하는 편인데 이것을 사용하는 편이 더 쉽고 접근이 간단하기 때문이다. 당연하겠지만 Text.rich 와 RichText 의 코드 적는 방식이나 동작은 완전하게 동일하다. 단지 맨위의 위젯이 RichText 냐 Text.rich 냐의 차이이지. 그래서 난 이왕 사용할 것이면 Text.rich 를 사용하기를 권고한다. 도움이 되었길 바라며 마치겠다.

반응형

 

반응형