티스토리 뷰

🤼‍♀️/Flutter

[Flutter] RichText

eungding 2021. 10. 5. 23:38
728x90
반응형

다양한 스타일이 혼합된 텍스트를 쓰고 싶을 때 RichText 위젯을 사용해주면 됩니다. 

예를들어 아래 예제처럼 중간 텍스트에만 볼드 처리를 하고 싶을 때 사용합니다. 

 

https://api.flutter.dev/flutter/widgets/RichText-class.html

 

 

RichText는 TextSpan 으로 구성된 트리로 이루어집니다. 

 

https://medium.com/flutter-community/make-text-styling-more-effective-with-richtext-widget-b0e0cb4771ef

 

 

문서의 예제처럼 Hello의 children으로 bold랑 world를 두기 싫으면

이렇게 할 수 도 있습니다.  UI는 똑같이 구성됩니다.

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

 

 

 

[ 추천 ] 

 

다양한 Use Case를 보여주는 글!

 

https://medium.com/flutter-community/make-text-styling-more-effective-with-richtext-widget-b0e0cb4771ef

 

Make text styling more effective with RichText widget

As the name suggests, RichText provides more options to the way a text is displayed on screen.

medium.com

 

728x90
반응형
댓글
댓글쓰기 폼