화면 구성 위젯 (텍스트)

Text

• 단일 스타일의 문자열을 표시한다.
• “\n” 문자열을 포함하여 여러 줄로 나누어질 수도 있다.
• 참고

Text(
  'Hello, I'm fine thank you! And you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

Text.rich

• 다양한 스타일을 사용한 여러 개의 문자열 위젯을 하나로 합쳐서 보여주는 위젯
• 내부 위젯 목록에는 TextSpan 위젯이 사용된다.
• 참고

Text.rich(
    TextSpan(children: [
        TextSpan(text: "신", style: TextStyle(color: Colors.red)),
        TextSpan(text: "호", style: TextStyle(color: Colors.yellow)),
        TextSpan(text: "등", style: TextStyle(color: Colors.green)),
    ]),
)

RichText

• 다양한 스타일을 사용한 여러 개의 문자열 위젯을 하나로 합쳐서 보여주는 위젯
• 내부 위젯 목록에는 TextSpan 위젯이 사용된다.
• 참고

RichText(
    text: TextSpan(children: [
        TextSpan(text: "신", style: TextStyle(color: Colors.red)),
        TextSpan(text: "호", style: TextStyle(color: Colors.yellow)),
        TextSpan(text: "등", style: TextStyle(color: Colors.green)),
    ]),
)

Text 유형 위젯들의 주요 속성

• TextStyle? style
  • 위젯의 스타일을 지정하는 속성
• TextAlign? textAlign
  • 정렬 위치를 지정하는 속성
  • 종류
    • TextAlign.left
      • 컨테이너의 좌측 가장자리에 정렬시킨다.
    • TextAlign.right
      • 컨테이너의 우측 가장자리에 정렬시킨다.
    • TextAlign.center
      • 컨테이너의 중앙에 정렬시킨다.
    • TextAlign.justify
      • 컨테이너의 전체 너비에 맞춰서 균등하게 정렬한다.
    • TextAlign.start
      • textDirection : TextDirection.ltr 상태일 때
        • 컨테이너의 좌측 가장자리에 정렬시킨다.
      • textDirection : TextDirection.rtl 상태일 때
        • 컨테이너의 우측 가장자리에 정렬시킨다.
    • TextAlign.end
      • textDirection : TextDirection.ltr 상태일 때
        • 컨테이너의 우측 가장자리에 정렬시킨다.
      • textDirection : TextDirection.rtl 상태일 때
        • 컨테이너의 좌측 가장자리에 정렬시킨다.
• TextDirection? textDirection
  • 배치 시작 위치를 지정하는 속성
  • 종류
    • TextDirection.ltr
      • 좌측부터 배치 시작
      • [A, B, C]가 있으면 합쳐져서 ABC라는 문자열이 좌측에 배치된다.
    • TextDirection.rtl
      • 우측부터 배치 시작
      • [A, B, C]가 있으면 합쳐져서 ABC라는 문자열이 우측에 배치된다.
      • 우측부터 배치한다고 CBA가 되는 건 아니고, 단순히 합쳐진 문자열이 우측에 배치되는 것뿐이다.
• bool? softWrap
  • 자연스러운 줄바꿈에 대한 속성
  • true일 경우에는 자연스럽게 줄바꿈이 진행된다.
  • false일 경우에는 줄바꿈 없이 하나의 라인에 계속 문자열이 추가된다.
• TextOverflow? overflow
  • 글자가 지정된 범위를 넘어간 경우에 대한 처리
• int? maxLines
  • 최대 라인 수를 지정한다.

TextStyle

• 텍스트 관련 위젯의 스타일을 꾸미기 위한 클래스
• 주로 사용하는 속성
  • Color? color
    • 글자 색상
  • Color? backgroundColor
    • 배경 색상
  • double? fontSize
    • 글자 크기
  • FontWeight? fontWeight
    • 글자 두께
  • FontStyle? fontStyle
    • 글꼴
  • double? letterSpacing
    • 글자간 간격
  • double? wordSpacing
    • 단어간 간격
  • TextBaseline? textBaseline
    • 글자를 정렬하는 기준선의 위치
  • double? height
    • 글자의 높이
  • TextLeadingDistribution? leadingDistribution
    • 글자의 분포도
  • TextOverflow? overflow
    • 글자가 지정된 범위를 넘어간 경우에 대한 처리
    • 말줄임 처리하는 TextOverflow.ellipsis나
      숨김처리하는 TextOverflow.fade를 많이 쓴다.

height 속성

• 글꼴 크기의 배수를 명시한다.
• 값이 null이거나 속성 자체가 생략될 경우 height의 값은 글꼴에 의해 결정된다.
• 지정한 fontSize가 글꼴에 의해 원하는 실제 높이와 달라질 수 있기 때문에,
  height 속성을 지정하여 글자가 정렬될 수 있는 그 범위를 늘려준다.

• 실제 Text 위젯의 높이는 fontSize * height의 값이 된다.

• height 속성을 지정하게 되면 글자가 약간 아래로 내려가기 때문에,
  중앙 정렬을 하고 싶을 때에는 아래와 같은 방식을 사용한다.

Text(
    '작성하고 싶은 문자열',
    style: TextStyle(
        height: 1.2,
        leadingDistribution: TextLeadingDistribution.even,
    )
)