Flutter의 텍스트 위젯(Text Widget)

Flutter에서 Text 위젯은 애플리케이션 화면에 텍스트를 표시하는 가장 기본적인 방법입니다. Text 위젯은 다양한 속성을 통해 텍스트의 스타일, 정렬, 줄 간격 등을 세밀하게 조정할 수 있습니다. 이번 글에서는 Text 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 사용법

Text 위젯의 기본적인 사용법은 매우 간단합니다. 단순히 텍스트 문자열을 전달하면 됩니다.

 

Text('Hello, Flutter!')

 

위 코드는 "Hello, Flutter!"라는 텍스트를 화면에 표시합니다.

2. 텍스트 스타일링

Text 위젯은 TextStyle 클래스를 사용하여 텍스트의 스타일을 지정할 수 있습니다. 글꼴 크기, 색상, 굵기, 글꼴 등을 설정할 수 있습니다.

 

Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    letterSpacing: 2.0,
    wordSpacing: 5.0,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

 

 

위 코드는 파란색, 24포인트 크기의 굵고 이탤릭체이며, 밑줄이 있는 텍스트를 생성합니다.

3. 텍스트 정렬

Text 위젯은 TextAlign 속성을 사용하여 텍스트의 정렬 방식을 지정할 수 있습니다. 가능한 값으로는 left, right, center, justify 등이 있습니다.

 

Text(
  'Centered Text',
  textAlign: TextAlign.center,
)

 

 

위 코드는 텍스트를 중앙에 정렬합니다.

4. 최대 줄 수 및 넘침 처리

maxLines와 overflow 속성을 사용하여 텍스트가 표시될 최대 줄 수와 넘침 처리 방식을 설정할 수 있습니다.

 

Text(
  'This is a very long text that should be truncated at some point.',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

 

 

위 코드는 텍스트가 한 줄을 초과하면 말줄임표(...)로 잘라서 표시합니다.

5. 텍스트 크기 조정

Text 위젯은 TextScaleFactor 속성을 사용하여 텍스트의 크기를 조정할 수 있습니다. 기본 값은 1.0이며, 이 값을 변경하여 텍스트 크기를 확대하거나 축소할 수 있습니다.

 

Text(
  'Scaled Text',
  textScaleFactor: 1.5,
)

 

위 코드는 텍스트 크기를 1.5배로 확대하여 표시합니다.

6. RichText를 통한 다채로운 텍스트

RichText 위젯과 TextSpan 클래스를 사용하여 하나의 텍스트 블록 내에서 여러 스타일을 적용할 수 있습니다.

 

RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'bold',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(text: ' world!'),
    ],
  ),
)

 

위 코드는 "Hello, bold world!"라는 텍스트를 표시하며, "bold" 부분만 굵게 스타일링됩니다.

7. 텍스트 방향

Text 위젯은 textDirection 속성을 사용하여 텍스트의 방향을 지정할 수 있습니다. 가능한 값으로는 TextDirection.ltr(왼쪽에서 오른쪽)과 TextDirection.rtl(오른쪽에서 왼쪽)이 있습니다.

 

Text(
  'Right to Left',
  textDirection: TextDirection.rtl,
)

 

위 코드는 텍스트를 오른쪽에서 왼쪽으로 표시합니다.

결론

Text 위젯은 Flutter 애플리케이션에서 텍스트를 표시하는 기본적이고 강력한 도구입니다. TextStyle을 사용한 스타일링, TextAlign을 사용한 정렬, maxLines와 overflow를 사용한 넘침 처리, RichText를 사용한 다채로운 텍스트 등 다양한 기능을 통해 텍스트를 세밀하게 조정할 수 있습니다. 이러한 기능들을 잘 활용하면 Flutter 애플리케이션의 텍스트 요소를 효과적으로 관리하고 아름답게 디자인할 수 있습니다.