[Flutter] Text widgets - Text

Flutter에서 문자열을 화면에 나타내기 위해서는 Text라는 위젯을 사용해야합니다.

Text widgets에서 Text, RichText, DefaultTextStyle 있는데

이번 포스팅에서 알아볼 위젯은 Text widget 입니다.

 

간단하게 보기!

RichText

- TextSpan개체의 트리를 사용하여 각 노드에 맞는 다르스타일을 정의

   (예를 들어 문장에서 강조를 위해 텍스트를 진하게 한다거나 등)

DefaultTextStyle

- 하위 텍스트 위젯에 적용할 텍스트 스타일

  (DefaultTextStyle > Column > Text, Text에서 Text의 스타일을 일괄 적용 하고 싶을때 주로 사용) 

문자열 화면에 표시하기

Center(
    child: Text(
    '안녕하세요?',
    ),
)

Text에 표시할 텍스트를 입력하면 화면에 표시됩니다.

 

Text 꾸미기

Text 위젯에서 style은 선택 사항이지만 크기, 색상, 폰트 등 텍스트를 꾸미고 싶을 경우 

TextStyle 위젯을 통해 텍스트를 꾸밀 수 있습다.

Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

 

만약 글씨가 영역을 넘었을 때 스타일을 처리하고 싶은 경우 overflow: TextOverflow 속성을 추가하면 됩니다.

 

Text.rich 생성자

Text.rich 생성자를 사용하면 Text 위젯에서 다른 스타일의 TextSpan이 있는 단락을 표시할 수 있습니다. 

const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)

만약 텍스트 섹션을 대화식(interactive)으로 만들려면 RichText를 사용하고 텍스트 관련 부분의 TextSpan.recognizer로 TapGesture Recognizer를 지정합니다.

 

 

[참고]

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