오늘은 Theme 수정 및 리팩토링 작업에 들어갔다.
새롭게 알게 된 사실도 많고, 까먹었던 기억들도 remind하는 시간이라 좋았다.

📖 TextTheme

❓ TextTheme의 사용법

TextTheme은 앱의 TextStyle, font 등을 한번에 관리할 수 있게 해주는 class이다.
Google Matrial Design 3에서는 다양한 TypoGraphy Style을 정의하고 있다.
가장 큰 비중을 차지하는 Display부터, Label까지 카테고리가 나뉘며, 각 카테고리마다 Large, Medium, Small 3단계로 나뉜다.
각 폰트마다 자간, 행간, 굵기 등 기본적인 규격은 맞추어져있다.

요약하자면 다음 표와 같다.

주로 HeadLine Small, Title Medium, Title Small이 대표적으로 사용된다.
직접 TextTheme을 MaterialApp의 Theme에 지정해주면 앱 전역에 걸쳐 사용할 수 있다.
전에 배웠던 Theme.of(context) 메서드를 사용하면 된다!

[google] https://api.flutter.dev/flutter/material/TextTheme-class.html

❓ 내가 사용한 TextTheme

class AppTextTheme {
  static TextTheme buildTextTheme(TextTheme base, Color color) {
    return GoogleFonts.notoSansTextTheme(base).copyWith(
      titleLarge: GoogleFonts.dongle(
        color: color,
        fontSize: 35,
        fontWeight: FontWeight.bold,
      ),
      bodyMedium: GoogleFonts.notoSans(
        color: color,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
      bodySmall: GoogleFonts.notoSans(color: color, fontSize: 14),
    );
  }
}

GoogleFonts를 동적으로 가져오는 라이브러리가 있길래 사용했다.
return 값이 GoogleFonts.notoSansTextTheme이지만, copyWith 메서드를 통해 각 카테고리별 TextStyle을 지정해줄 수 있다.

그럼 여기서, base로 들어간 TextTheme은 어떤 녀석일까?
그리고 왜 notoSansTextTheme의 파라미터로 사용되는 걸까?

❓ base의 정체

여기서 사용된 TextTheme은 TextStyle의 프로토타입이다.
NotoSans 폰트의 파라미터로 들어간 이유는 "base를 기준으로 NotoSans 폰트를 적용시켜줘"라는 의미이다.
즉, 기본 설계도를 TextTheme으로 사용하겠다는 의미이다.

만약 파라미터를 지정해주지 않는다면, 개발자 마음대로 기본값을 설정할 수 있다.

❓ 그럼 왜 이렇게 작성할까?

크게 3가지 장점을 가지고 있다.

• 디자인은 구글에 맡기고, 폰트만 변경할 수 있다.
• fontSize, fontWeight를 직접 설정하지 않아도 된다. 이 과정에서 에러를 줄일 수 있다.
• 나중에 시스템 설정에서 글자 크기를 키우거나 줄여도, textTheme을 이용하여 만들어진 테마는 유연하게 대응된다.

📖 ContainerThemeData는..?

사실 가장 많이 쓰이는 Widget 중 하나가 Container인데.. ContainerThemeData는 아쉽게 없다.
flutter에서 Container는 "다목적 박스" 정도로 생각하고 있다.
특정 역할보단 범용적으로 쓰이고 있다는 뜻이다.
때문에, Container를 특정 테마로 묶어버리면 앱 안의 대부분의 박스는 통일된 디자인을 하고 있을 것이다.

Box 스타일의 위젯을 관리하고 싶다면, CardTheme이 대안이 될 수 있을 듯 하다.
이부분도 다음 앱 개발 시 고려해봐야겠다.