플러터 텍스트 위젯 Flutter Text Widget

플러터 텍스트 위젯 Flutter Text Widget

2024. 12. 3. 12:58ㆍ프론트/플러터

Text

Text 위젯은 문자열 데이터를 화면에 표시한다.

Text('Hello Flutter!');

HTML의 어트리뷰트 처럼 속성이 여러가지 있다.

1. data : 출력할 문자열이다. 위에서 Hello Flutter!라고 쓴 부분이다.

2. style : 텍스트의 스타일을 정의하는 TextStyle 객체 설정이다. 스타일에 대한 설명은 추후에..

Text(
  'Styled Text',
  style: TextStyle(		//style(키): TextStyle(..)(생성자)
    fontSize: 24,          // 글자 크기
    color: Colors.blue,    // 글자 색상
    fontWeight: FontWeight.bold, // 굵기
    fontStyle: FontStyle.italic, // 기울임꼴
    decoration: TextDecoration.underline, // 밑줄
  ),
);

2.1 style 세부사항 (주요 속성)

fontSize : 글자 크기
color : 글자 색상 (Colors.green, Color.fromRGBO(255, 0, 0, 1.0 등)
fontWeight : 글자 굵기 (FontWeight.bold, FontWeight.w100 등)
fontStyle : 기울일건지 (FontStyle.italic)
letterSpacing : 글자 간격
wordSpacing : 단어 간격
decoration : 텍스트 장식 (TextDecoration.underline 등)
decorationColor : 장식의 색상
decoration.Style : 장식 스타일 (TextDecorationStyle.dashed 등)

3. textAligin : 텍스트 정렬 방식을 설정한다.

- 기본 값 TextAligin.start

- 사용 가능한 값

TextAligin.left : 왼쪽 정렬
TextAligin.right : 오른쪽 정렬
TextAligin.center : 가운데 정렬
TextAligin.justify : 양쪽 정렬

예제

Text(
    '가운데 텍스트',
    textAligin: TextAligin.center,
);

4. textDirection : 텍스트 방향을 설정한다.

기본 값 : 시스템 설정에 따른다.

사용 가능한 값 :

TextDirection.lrt : 왼쪽에서 오른쪽
TextDirection.rtl : 오른쪽에서 왼쪽

예제

Text(
  'RTL 텍스트',
  textDirection: TextDirection.rtl,
);

5. maxLines : 텍스트가 표시될 최대 줄 수 제한한다.

제한이 없으려면 null로 설정한다.

예제

Text(
  '이 텍스트는 매우 길고, 적절한 조치를 취하지 않으면 넘어가버릴 수도 있을 수도 있을 수도 있다.',
  maxLines: 2, // 최대 2줄로 제한
  overflow: TextOverflow.ellipsis, // 넘치는 부분은 "..."으로 표시
);

6. overflow : 텍스트가 영역을 초과할 때 동작을 정의한다.

사용 가능한 값 :

TextOverFlow.clip : 초과된 텍스트 자르기
TextOverFlow.fade : 초과된 텍스트 페이드 처리
TextOverFlow.ellipsis : 초과된 텍스트 ... 처리

예제

Text(
  '이 엄청나게 긴 텍스트는 영역을 초과하는 순간 잘리고 없어집니다........',
  overflow: TextOverflow.clip,
);

7. softWrap : 텍스트가 컨테이너의 경계를 넘어갈 때 줄바꿈 여부를 결정한다.

기본 값 : true

예제

Text(
  '이 기다란 텍스트는 경계를 넘어가면 줄이 바뀝니다..',
  softWrap: false, // 줄바꿈 비활성화
);

8. structStyle : 텍스트의 줄 높이를 명시적으로 설정한다.

예제

Text(
  '커스텀 줄 높이',
  strutStyle: StrutStyle(
    fontSize: 24,
    height: 1.5, // 줄 높이
  ),
);

9.textScaleFactor : 텍스트의 크기를 조정하는 배율을 설정한다.

기본값 : 시스템의 텍스트 배율

예제

Text(
  '배율 설정 텍스트',
  textScaleFactor: 1.5, // 텍스트 크기를 1.5배로 확대
);

10. locale : 언어 및 지역 설정을 지정한다.

기본 값 : 시스템 설정에 따른다.

예제

Text(
  'Localized Text',
  locale: Locale('ko', 'KR'), // 한국어 설정
);

RichText

Text위젯은 단순한 텍스트에 사용되고, 복잡한 스타일링이 필요한 경우 RichText 위젯을 사용한다.

RichText는 텍스트를 여러 스타일로 나눠 표시할 수 있는 고급 텍스트 위젯이다.

text 속성에 TextSpan 객체를 전달하여 스타일링 한다.

RichText(	//RichText
  text: TextSpan(	//text 속성에 TextSpan 객체 만들어서 전달
    text: '첫 번째 텍스트 ',
    style: TextStyle(fontSize: 20, color: Colors.black),	//전체 적용할 거
    children: <TextSpan>[	//TextSpan 배열
      TextSpan(
        text: '두 번째 텍스트',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      TextSpan(
        text: '세 번째 텍스트',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
);

Text vs RichText 주요 차이점

특성	Text	RichText
목적	단순 텍스트 표시	복잡한 텍스트 스타일링
스타일 적용	전체 텍스트에 하나의 스타일 적용	텍스트의 각 부분에 다른 스타일 적용 가능
주요 속성	style :	text : (TextSpan 객체)
사용 용도	간단한 텍스트 표시 (제목, 설명 등)	강조 텍스트, 다국어 텍스트, 다양한 스타일
구조	단일 레이어	계층 구조 (TextSpan 사용)
성능	더 간단하며 성능이 좋다	상대적으로 복잡한 작업이 많다.

종합하여 사용해보기

Text(
  '종합하여 사용하기',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    letterSpacing: 2.0,
    wordSpacing: 4.0,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.wavy,
    height: 1.5,
    fontFamily: 'Roboto',
    shadows: [
      Shadow(offset: Offset(2, 2), blurRadius: 4.0, color: Colors.grey),
    ],
    backgroundColor: Colors.yellow,
  ),
);

저작자표시 (새창열림)

뇌 외부 저장장치