[Flutter] enum을 이용한 ui resouce 관리(3. TextStyle)

[1.이미지(Image)]

[2.컬러(Color)]

[3.텍스트스타일(TextStyle]

 

3. 텍스트 스타일(TextStyle)을 enum으로 관리하는 방법

Text("hello", style: ResTextStyle.t1.bold())

 

 

TextStyle은 flutter ui에서 상당히 많이 사용됩니다.

당연히도 화면에 글지로 표시하여 사용자에게 정보나 의미를 전달해야 되기 때문이죠.(당연한 말이죠? ㅎㅎ)

제가 flutter를 사용하면서 TextStyle을 매번 지정하는 것은 상당히 번거로운 일이었습니다.

코드의 라인수도 늘어날 뿐 아니라 보기도 다른 코드들과 섞이면 흔히 말하는 시인성(코드의 리더빌리티, Readability) 가 떨어지게 되서 불편합니다.

또 코딩하다 text style을 지정할때 잠깐 머뭇거리면서 끈김 현상이 발생합니다(제 머리가요..)

 

TextField(         controller: controller,         readOnly: readOnly??false,         minLines: 1,         maxLines: 7,         decoration: InputDecoration(             contentPadding: EdgeInsets.symmetric(vertical: W(75)),             filled: true, fillColor: Color.fromRGBO(100,120,100,1.0),             border: OutlineInputBorder(                 borderRadius: BorderRadius.circular(W(60)), borderSide: BorderSide.none),             prefixIcon: icon,             hintText: hintText,             hintStyle: TextStyle(color: Color.fromRGBO(25,20,25,1), fontSize: 65, fontWeight: FontWeight.w500)),     );

저는 이런점들을 좀 줄여보고자 몇가지 고민을 했었는데요.

일단 어플리케이션에 사용하는 폰트크기를 미리 정의하는 것이었습니다.

 

class ResFonts{ static cosnt int t1 = 65; static cosnt int t2 = 58; static cosnt int t3 = 48; static const int m1= 24; static const int m2= 18;  static const int m3= 16;  static const int m4= 10;

 

이런 식으로 정의해서 사용했죠.

또 getTextStyle() 같은 함수를 만들어 사용해보기도 했는데요. 오히려 코딩시에 더 거슬리더군요.

 

최근 enum을 이용해서 간단 textStyle을 만들었는데 의외로 쓸만해서 계속 사용하게 되었습니다.

소개해드리겠습니다.

 

TextStyle 관리하기

제가 사용하는 textstyle 패턴은 아래와 같습니다.

텍스트와 텍스트스타일을 함께 사용하게 되는데 enum을 사용해서 쓰던 ResImage 와 유사하죠.?

Text("hello", style: ResTextStyle.t1.defStyle)

이렇게 사용하면서 상당히 코드의 시인성도 좋아지고 타이핑도 간결해져서 좋더군요.

 

어떻게 만들었는지 한번 보겠습니다.

 

enum을 정의하는 형식은 아래와 같습니다. 폰트의 크기와 기본 weight을 설정하는 형태이죠.

enum ResTextStyle{
  /** fontsize:68 */
  t1(FontWeight.bold, 68),
  /** fontsize:62 */
  t2(FontWeight.bold, 62),
  /** fontsize:58 */
  m1(FontWeight.normal, 58),//58
  /** fontsize:48 */
  m2(FontWeight.normal, 48),

이렇게 하기 위해서는 생성자(constructor)를 다음과 같이 만들어줘야 합니다.

 

final FontWeight fontWeight;
final double fontSize;

const ResTextStyle(this.fontWeight, this.fontSize);

fontWeight와 fontSize를 가지고 생성할 수 있도록 했죠.

다음으로  textStyle을 생성해주는 getter를 하나 만듭니다.

TextStyle get defStyle => TextStyle( fontWeight: fontWeight, fontSize: W(fontSize));

이렇게 하면 위에서 봤던 ResTextStyle.t1.defStyle 이런 방식의 사용이 가능해집니다.

 

저는 처음에 여기까지 해놓고 나서 사용하기 시작했는데, 불편한점들이 몇가지 있었습니다.

- 일단 색상 선택이 불가능하다

- 같은 폰트 크기인데 bold와 normal을 구분하고 싶다.

이런 문제들이 있어서 추가로 getter를 만들려다 함수를 만들게 되었는데,

bold(), normal() 이라는 함수를 추가로 만들게 되었는데, 이러고 나니 상당히 편리한 형태로 사용할수 있고 확장도 가능해졌습니다.

 

TextStyle normal({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.normal, fontSize: fontSize, overflow: overflow);
TextStyle bold({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.bold, fontSize:fontSize, overflow: overflow);

실제 사용시에는 다음과 같습니다.

Text("hello", style: ResTextStyle.t1.bold(color:ResColor.gray100)

이런식으로 font크기 + weight + color 가 가능한 형태가 되더군요.

IDE에서 쉽게 검색도 가능한 형태로 말이죠.

 

최종본

enum ResTextStyle{
  /** fontsize:68 */
  t1(FontWeight.bold, 68),
  /** fontsize:62 */
  t2(FontWeight.bold, 62),
  /** fontsize:58 */
  m1(FontWeight.normal, 58),//58
  /** fontsize:48 */
  m2(FontWeight.normal, 48),

  h1(FontWeight.normal, 65), //by ayeong
  ;

  final FontWeight fontWeight;
  final double fontSize;

  const ResTextStyle(this.fontWeight, this.fontSize);

  TextStyle get defStyle => TextStyle( fontWeight: fontWeight, fontSize: fontSize);
  TextStyle normal({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.normal, fontSize: fontSize, overflow: overflow);
  TextStyle bold({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.bold, fontSize: fontSize, overflow: overflow);

}

 

이렇게 해서 제가 사용하는 flutter에서 enum을 이용한 resource 관리 방법 3가지 소개해드렸습니다.

 

!! 해피 코딩!!

 

[1.이미지(Image)]

[2.컬러(Color)]

[3.텍스트스타일(TextStyle]