텍스트 위젯

텍스트 위젯은 다양한 스타일과 속성을 가진 문자열을 표시합니다. 리치 텍스트 서식, 정렬, 오버플로우 처리 등을 지원합니다.

속성

text: string - 표시할 텍스트

style: TextStyle - 텍스트 스타일 속성

new TextStyle({
  color?: string,              // 텍스트 색상
  fontSize?: number,           // 픽셀 단위의 글꼴 크기
  fontWeight?: string,         // 글꼴 두께 (예: "normal", "bold")
  fontFamily?: string,         // 글꼴 패밀리 이름
  fontStyle?: FontStyle,       // FontStyle.normal 또는 FontStyle.italic
  height?: number,             // 글꼴 크기의 배수로 표현된 줄 높이
  inherit?: boolean           // 부모 스타일을 상속할지 여부
})

textAlign: TextAlign - 텍스트 정렬

TextAlign.left;
TextAlign.right;
TextAlign.center;
TextAlign.start; // 선행 가장자리 (LTR에서는 왼쪽, RTL에서는 오른쪽)
TextAlign.end; // 후행 가장자리 (LTR에서는 오른쪽, RTL에서는 왼쪽)

overflow: TextOverflow - 텍스트 오버플로우 처리 방법

TextOverflow.clip; // 오버플로우 텍스트 잘라내기
TextOverflow.visible; // 오버플로우 텍스트 표시
TextOverflow.ellipsis; // 오버플로우에 말줄임표(...) 표시

softWrap: boolean - 텍스트가 소프트 줄바꿈에서 줄바꿈되어야 하는지 여부
textDirection: TextDirection - 텍스트의 방향성

textWidthBasis: TextWidthBasis - 렌더링된 텍스트의 너비를 측정하는 방법

TextWidthBasis.parent;      // 부모 너비를 기준으로 사용
TextWidthBasis.longestLine; // 가장 긴 줄의 너비를 사용

일반적인 사용 사례

기본 텍스트:
```
Text("안녕하세요 Flitter");
```

스타일이 적용된 텍스트:

Text("스타일이 적용된 텍스트", {
  style: new TextStyle({
    fontSize: 24,
    color: "blue",
    fontWeight: "bold",
  }),
});

가운데 정렬된 텍스트:

Text("가운데 정렬된 텍스트", {
  textAlign: TextAlign.center,
  style: new TextStyle({
    fontSize: 18,
  }),
});

오버플로우가 있는 텍스트:

Text("이것은 매우 긴 텍스트입니다...", {
  overflow: TextOverflow.ellipsis,
  style: new TextStyle({
    fontSize: 16,
  }),
});

줄바꿈이 있는 텍스트:

Text("이것은 컨테이너의 너비에 도달하면 다음 줄로 줄바꿈되는 긴 텍스트입니다", {
  softWrap: true,
  style: new TextStyle({
    fontSize: 16,
  }),
});

너비 기준이 있는 텍스트:

Text("여러 줄 텍스트\n다양한 줄 길이", {
  textWidthBasis: TextWidthBasis.longestLine,
  style: new TextStyle({
    fontSize: 16,
  }),
});

모범 사례

스타일링 가이드라인:
- 일관된 텍스트 스타일링에는 TextStyle 사용
- 접근성을 위한 글꼴 크기 조정 고려
- 가독성을 위한 적절한 글꼴 크기 사용
- 색상 대비 고려
레이아웃 팁:
- 적절한 정렬을 위해 textAlign 사용
- 오버플로우 처리 고려
- 가독성을 위한 적절한 줄 높이 사용
- 필요한 경우 텍스트 방향 처리
- 자동 줄바꿈을 위해 softWrap 사용
- 레이아웃 계산을 위한 적절한 textWidthBasis 선택
성능 팁:
- 가능한 경우 TextStyle 객체 캐싱
- const 생성자 사용
- 텍스트 측정의 영향 고려
- 불필요한 스타일 변경 피하기

일반적인 패턴

제목 텍스트:

Text("제목", {
  style: new TextStyle({
    fontSize: 24,
    fontWeight: "bold",
    color: "black",
  }),
});

캡션 텍스트:

Text("캡션", {
  style: new TextStyle({
    fontSize: 12,
    color: "gray",
    height: 1.2,
  }),
});

오류 메시지:

Text("오류: 문제가 발생했습니다", {
  style: new TextStyle({
    fontSize: 14,
    color: "red",
    fontWeight: "bold",
  }),
});

팁과 요령

스타일 팁:
- 강조를 위해 글꼴 두께 사용
- 가독성을 위한 줄 높이 고려
- 적절한 글꼴 패밀리 사용
- 텍스트 스타일 일관성 유지
레이아웃 팁:
- 텍스트 너비 제약을 위해 Container 사용
- 부모와의 텍스트 정렬 고려
- 적절한 오버플로우 처리
- 텍스트 간격을 위해 패딩 사용
접근성 팁:
- 의미 있는 글꼴 크기 사용
- 좋은 색상 대비 유지
- 텍스트 크기 조정 고려
- 적절한 줄 높이 사용