Flutter & Dart TextStyle 응용

 

TextStyle 이란 ? 

Text 위젯에서 사용하는 스타일이다.

Text(
    'data',
    style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
  ),

이러한 방식으로 사용 하는 것이 Text 위젯이다.

 

세부 속성으로는 이러한 것 들이 있다.

• fontSize: 글꼴 크기를 설정합니다.
• fontWeight: 문자의 두께를 설정합니다. 'FontWeight.bold'는 텍스트를 굵게 만드는 데 사용됩니다.
• color: 텍스트의 색상을 설정합니다.
• fontStyle: 일반 또는 기울임꼴과 같은 글꼴 스타일을 지정합니다.
• decoration : 줄 장식(이 경우 밑줄)을 추가합니다.
• decorationColor : 텍스트 장식의 색상을 설정합니다.
• decorationStyle : 텍스트 장식의 스타일을 설정합니다(이 경우 이중 밑줄).

Text를 선언할 때마다 항상 세부 속성을 입력하기엔 너무 내용이 많다.

그래서 미리 선언한 뒤 사용한다.

AppTextStyle 선언

class AppTextStyle {
  TextStyle colorBlack16 =
      TextStyle(fontSize: 16, 
      			color: AppColors().colorBlack);
      
  TextStyle colorBlackBold16 =
      TextStyle(fontSize: 16, 
      			color: AppColors().colorBlack,
      			fontWeight: FontWeight.bold);      
}

 

이와 같이 AppTextStyle를 미리 선언 후 ApptextStyle.colorBlack16을 호출하여 사용한다.

이를 응용하면 스타일에 그림자, 밑줄, 사이즈, 색상 등등 모든 것을 알기 쉬운 단어로 선언 후 사용 가능하다.

 

TextStyle 응용

 Text(
      '응용 방법.',
      style: AppTextStyle().colorBlack16,
    ),