플러터 Text 위젯 사용법 및 옵션 완벽 가이드

플러터에서 텍스트를 표시하는 데 가장 기본적인 위젯은 바로 Text 위젯입니다.

간단한 문구부터 풍부한 스타일링을 가진 문단까지, 다양한 텍스트 표현이 가능합니다.

이 블로그 글에서는 Text 위젯의 사용법과 주요 옵션들을 자세히 살펴보고, 실제 코드 예시와 함께 다양한 텍스트 표현을 구현해 보겠습니다.

 

1. 기본 사용법

 

Text 위젯은 표시할 텍스트 문자열을 data 속성으로 전달합니다.

옵션 없이 기본적으로 사용하면 검은색 텍스트가 왼쪽 정렬된 상태로 표시됩니다.

 

Text('Hello, Flutter!'),

 

2. 주요 옵션

 

Text 위젯에는 다양한 옵션들이 존재하여 텍스트의 스타일과 레이아웃을 자유롭게 조정할 수 있습니다.

주요 옵션들과 예시 코드는 다음과 같습니다.

• style: 폰트, 크기, 색상, 두께, 정렬 등을 설정합니다.

  Text(
    '플러터 배우기',
    style: TextStyle(
      fontSize: 24.0,
      fontWeight: FontWeight.bold,
      color: Colors.red,
      fontStyle: FontStyle.italic,
      decoration: TextDecoration.underline,
      decorationStyle: TextDecorationStyle.wavy,
    ),
  ),
  

   
• textAlign: 텍스트 정렬 방식을 설정합니다. TextAlign.left, TextAlign.center, TextAlign.right, TextAlign.justify 등의 값을 사용할 수 있습니다.

  Text(
    '왼쪽 정렬',
    textAlign: TextAlign.left,
  ),
  Text(
    '중앙 정렬',
    textAlign: TextAlign.center,
  ),
  Text(
    '오른쪽 정렬',
    textAlign: TextAlign.right,
  ),
  Text(
    '양쪽 정렬',
    textAlign: TextAlign.justify,
  ),
  

   
• maxLines: 최대 표시되는 텍스트 줄 수를 설정합니다. 텍스트가 줄바꿈될 경우, 텍스트 끝에 ... 기호가 표시됩니다.
   

  Text(
    '긴 문장입니다. 여러 줄로 나뉘어 표시됩니다.',
    maxLines: 2,
  ),
  

   
• softWrap: 텍스트가 줄바꿈될 경우, 단어 단위로 줄바꿈되는지 문자 단위로 줄바꿈되는지 설정합니다.
   

  Text(
    '긴문장입니다여러줄로나뉘어표시됩니다.',
    softWrap: false,
  ),
  

   
• overflow: 텍스트가 maxLines 설정된 줄 수보다 더 많은 경우 어떻게 처리할지 설정합니다. TextOverflow.ellipsis는 텍스트 끝에 ... 기호를 표시하고, TextOverflow.clip은 텍스트를 잘라내고, TextOverflow.visible은 모든 텍스트를 표시합니다.
   

  Text(
    '긴문장입니다여러줄로나뉘어표시됩니다.',
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
  

   
• textDirection: 텍스트 방향을 설정합니다. TextDirection.ltr은 왼쪽에서 오른쪽 방향, TextDirection.rtl은 오른쪽에서 왼쪽 방향으로 표시됩니다.
   

  Text(
    '안녕하세요, 플러터!',
    textDirection: TextDirection.rtl,
  ),
  

   

3. 다양한 텍스트 표현

 

위에서 소개한 옵션들을 활용하여 다양한 텍스트 표현을 구현할 수 있습니다. 예를 들어, 다음과 같은 코드는 그림과 텍스트가 혼합된 레이아웃을 만듭니다.

 

Row(
  children: [
    Image.asset('assets/images/flutter_logo.png'),
    SizedBox(width: 16.0),
    Text('플러터 배우기'),
      ]
    )

 

 

4. Rich Text

RichText 위젯은 다양한 스타일을 가진 텍스트를 표시하는 데 사용됩니다. 각 문자열에 개별적으로 스타일을 적용하여 더욱 풍부한 텍스트 표현이 가능합니다.

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: '안녕하세요, ',
        style: TextStyle(color: Colors.red),
      ),
      TextSpan(
        text: '플러터!',
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
    ],
  ),
)

 

5. 팁

• 텍스트 스타일을 지정할 때 TextStyle 클래스의 다양한 속성들을 활용하여 원하는 스타일을 정확하게 구현할 수 있습니다.
• Text 위젯은 다양한 다른 위젯들과 함께 사용하여 레이아웃을 구성할 수 있습니다.
• 텍스트 표현과 관련하여 더 많은 옵션과 기능들을 알아보고 싶으시다면 플러터 공식 문서를 참고하시기 바랍니다. (https://api.flutter.dev/flutter/widgets/Text-class.html)

6. 마무리

 

플러터 Text 위젯은 다양한 옵션과 기능들을 제공하여 간단한 문구부터 복잡한 텍스트 표현까지 자유롭게 구현할 수 있도록 지원합니다.

이 블로그 글을 통해 Text 위젯에 대한 이해를 높이고, 실제 개발에 활용하시면 도움이 될 것입니다.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release