프로그래밍/Flutter

[ Flutter Widget ] 플러터 기본위젯 - Text

호랑이탈 2025. 1. 1. 03:00
반응형

Flutter 기본위젯 - Text 위젯

 

Text() 함수 원형

const Text(
  String data, {
  Key? key,
  TextStyle? style,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  bool? softWrap,
  TextOverflow? overflow,
  double? textScaleFactor,
  int? maxLines,
  String? semanticsLabel,
  TextWidthBasis? textWidthBasis,
  StrutStyle? strutStyle,
})

 

1. data ( 필수 사항 )

  •  텍스트로 표시할 문자열 입니다. 
  •  타입 : String
Text('Hello, Flutter!');

 

2. style

  • 텍스트의 스타일을 지정합니다. TextStyle 객체를 사용하여 글꼴, 색상, 크기 등을 설정할 수 있습니다.
  • 타입 : TextStyle?
  • 세부 속성
    • fontSize : 텍스트 크기
    • color : 텍스트 색상
    • fontWeight : 글자 두께 ( ex. FontWeight.bold ).
    • fontStyle : 기울임꼴 여부 ( ex. FontStyle.italic )
    • letterSpacing ; 글자 간격.
    • wordSpacing : 단어 간격
    • decoration : 텍스트 장식 ( ex. 밑줄, 선긋기 등 )
Text("Text02",
               style: TextStyle(
                 color: Colors.red,
                 fontSize: 30,
                 fontWeight: FontWeight.bold,
                 fontStyle: FontStyle.italic,
                 letterSpacing: 10,
                 wordSpacing: 20,
                 decoration: TextDecoration.underline
               ),)

 

 

 

3. textAlign

  • 텍스트의 정렬을 지정합니다.
  • 타입 : TextAlign?
    • TextAlign.left : 왼쪽 정렬
    • TextAlign.center : 가운데 정렬
    • TextAlign.right : 오른족 정렬
    • TextAlign.justify : 양쪽 정렬
Text(
  'Center aligned text',
  textAlign: TextAlign.center,
);

 

4. textDirection

  • 텍스트의 읽기 방향을 설정합니다.
  • 타입 : textDirection?
    • TextDirection.ltr : 왼쪽에서 오른쪽 (기본 값 )
    • TextDirection.rtl : 오른쪽에서 왼쪽
Text(
  'Right to Left Text',
  textDirection: TextDirection.rtl,
);

 

5. locale

  • 텍스트의 지역화(locale)를 지정합니다. 텍스트의 언어 및 형식 지정에 사용됩니다.
  • 타입 : Locale?
Text(
  'Localized Text',
  locale: Locale('en', 'US'), // 영어 (미국)
);

 

6. softWrap

  • 텍스트가 줄바꿈 될지 여부를 지정합니다.
  • 타입 : bool?
  • 기본값 : true
    • true : 텍스트가 위젯 경계를 넘어가면 줄바꿈 됨
    • false : 텍스트가 잘림
Text(
  'This is a very long text that will not wrap to the next line.',
  softWrap: false,
);

 

7. overflow

  • 텍스트가 위젯 경게를 초과할 경우 처리방시을 지정합니다.
  • 타입 : TextOverflow?
    • TextOverflow.clip: 초과된 텍스트를 자름
    • TextOverflow.ellipsis: 말줄임표(...) 추가
    • TextOverflow.fade: 텍스트가 점점 투명해짐
Text(
  'Overflow Text Example',
  overflow: TextOverflow.ellipsis,
);

 

 

 

8. textScaleFactor

  • 텍스트의 크기 배율을 설정합니다. 기본값은 시스템 설정 값입니다.
  • 타입 : double?
Text(
  'Scaled Text',
  textScaleFactor: 1.5, // 1.5배 크기
);

 

9. maxLines

  • 표시할 최대 줄 수를 지정합니다. 이 값을 초과하면 overflow 속성에 따라 처리됩니다.
  • 타입 : int?
Text(
  'This is a text that will only display two lines at maximum.',
  maxLines: 2,
);

 

 

10. semanticsLabel

  • 화면 리더가 읽을 텍스트를 지정합니다. 접근성을 개선하는 데 사용됩니다.
  • 타입 : String?
Text(
  'Visually displayed text',
  semanticsLabel: 'Accessibility label for screen readers',
);

 

11. textWidthbasis

  • 텍스트 폭 계산 기준을 지정합니다.
  • 타입 : TextwidthBasis?
    • TextWidthBasis.parent : 부모 위젯의 폭 기준
    • TextWidthBasis.longestLine : 가장 긴 줄 기준
Text(
  'Width Basis Example',
  textWidthBasis: TextWidthBasis.longestLine,
);

 

12. strutStyle

  • 텍스트 줄 높이를 제어합니다.
  • 타입 : StrutStyle?
Text(
  'Custom Strut Style',
  strutStyle: StrutStyle(
    fontSize: 16,
    height: 1.5,
  ),
);

 

 

13. key 

  • Key는 Flutter 위젯 트리를 효율적으로 관리하고, 상태와 고유성을 보장하기 위해 사용됩니다.
  • 리스트나 상태 관리가 필요한 경우 사용하며, ValueKey, UniqueKey, GlobalKey 등을 상황에 따라 선택하여 사용합니다.
  • 키를 올바르게 사용하면 앱 성능과 유지 보수가 크게 향상됩니다.
반응형