Text

플러터에서 Text 위젯은 텍스트를 화면에 표시하는 데 사용됩니다. 매우 기본적이지만 매우 유용하며, 다양한 속성과 스타일을 통해 텍스트의 표시를 세밀하게 조정할 수 있습니다. 아래에서 Text 위젯의 주요 속성과 사용 방법을 자세히 설명하겠습니다.

1. 기본 사용법

Text(
  'Hello, World!',
  style: TextStyle(fontSize: 24),
)

이 코드는 “Hello, World!”라는 텍스트를 화면에 표시하며, 텍스트의 크기를 24로 설정합니다.

2. 주요 속성

• data: 텍스트의 내용을 설정합니다. 문자열을 전달합니다.

  Text('Hello, World!')
  

• style: TextStyle 객체를 사용하여 텍스트의 스타일을 정의합니다. 텍스트의 폰트, 크기, 색상, 두께 등을 설정할 수 있습니다.

  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontFamily: 'Roboto',
    letterSpacing: 1.5,
    wordSpacing: 2.0,
    height: 1.2,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
  )
  

  • fontSize: 텍스트의 크기를 설정합니다.
  • fontWeight: 텍스트의 두께를 설정합니다. FontWeight.bold 또는 FontWeight.normal 등이 있습니다.
  • color: 텍스트의 색상을 설정합니다. Color 클래스를 사용하여 색상을 정의합니다.
  • fontFamily: 텍스트의 폰트를 설정합니다. 기본적으로 시스템 폰트를 사용하지만, 사용자 정의 폰트를 지정할 수도 있습니다.
  • letterSpacing: 문자 간의 간격을 설정합니다.
  • wordSpacing: 단어 간의 간격을 설정합니다.
  • height: 텍스트의 줄 높이를 설정합니다.
  • decoration: 텍스트에 장식선을 추가합니다. 예를 들어, TextDecoration.underline (밑줄), TextDecoration.lineThrough (취소선) 등을 사용할 수 있습니다.
  • decorationColor: 장식선의 색상을 설정합니다.
  • decorationStyle: 장식선의 스타일을 설정합니다. TextDecorationStyle.solid, TextDecorationStyle.dashed, TextDecorationStyle.dotted 등이 있습니다.

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

  textAlign: TextAlign.center
  

• overflow: 텍스트가 컨테이너를 넘칠 때의 처리를 설정합니다. TextOverflow.ellipsis (말줄임표), TextOverflow.fade (페이드 아웃), TextOverflow.clip (잘림) 등을 사용할 수 있습니다.

  overflow: TextOverflow.ellipsis
  

• maxLines: 텍스트의 최대 줄 수를 설정합니다. 이 속성을 설정하면 텍스트가 지정한 줄 수를 초과하지 않도록 자릅니다.

  maxLines: 2
  

• textScaleFactor: 텍스트의 크기 배율을 설정합니다. 기본값은 1.0입니다.

  textScaleFactor: 1.5
  

• softWrap: 텍스트가 줄 바꿈을 허용하는지 여부를 설정합니다. 기본값은 true입니다.

  softWrap: true
  

• strutStyle: 텍스트의 높이와 관련된 스타일을 설정합니다. StrutStyle을 사용하여 텍스트의 라인 높이, 최소 높이 등을 조정할 수 있습니다.

  strutStyle: StrutStyle(
    fontSize: 16.0,
    height: 1.2,
  )
  

3. 예제

다양한 속성을 활용하여 Text 위젯을 스타일링할 수 있습니다.

Text(
  'Styled Text Example',
  style: TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.w500,
    color: Colors.deepPurple,
    fontFamily: 'Arial',
    letterSpacing: 2.0,
    wordSpacing: 4.0,
    height: 1.5,
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dotted,
  ),
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
  textScaleFactor: 1.2,
  softWrap: true,
)

이 예제는 다양한 텍스트 스타일링 옵션을 보여줍니다. 텍스트 크기, 색상, 두께, 폰트, 간격, 장식 및 정렬을 설정하였고, 텍스트 오버플로우와 줄 수, 텍스트 스케일 팩터를 조정했습니다.

Text 위젯은 Flutter에서 텍스트를 효과적으로 표시하고 조작할 수 있는 강력한 도구입니다. 다양한 속성과 스타일링 옵션을 활용하여 원하는 방식으로 텍스트를 사용자 정의할 수 있습니다.

Widget 카테고리 내 다른 글 보러가기