[TIL] Theme 분리, 속성 정리

김영광·2025년 12월 24일

Theme을 분리하기 위해서 여러 생각을 해봤다.
Theme을 상속받아 사용해볼까, 아니면 class 하나에 static 전역 변수로 사용해볼까?

🔎 Theme이 왜 테마임.. 띰이지..

📖 static을 이용한 테마 분리


class BoardTheme {
  static ThemeData theme = ThemeData(
    useMaterial3: true,
    appBarTheme: AppBarThemeData(
      actionsPadding: EdgeInsets.only(right: 10),
      centerTitle: true,
      foregroundColor: Colors.white,
      backgroundColor: Colors.grey[200],
    ),

    colorScheme: ColorScheme.fromSeed(
      brightness: Brightness.light,
      seedColor: Colors.blue,
      primary: Colors.amber,
      surface: Colors.white,
    ),

    dividerColor: Colors.black,
    highlightColor: Colors.redAccent,
    fontFamily: "CustomFont",
  );

  static ThemeData darkTheme = ThemeData(
    useMaterial3: true,
    appBarTheme: AppBarThemeData(
      actionsPadding: EdgeInsets.only(right: 10),
      centerTitle: true,
      foregroundColor: Colors.black,
      backgroundColor: Colors.grey,
    ),
    colorScheme: ColorScheme.fromSeed(
      brightness: Brightness.dark,
      seedColor: Colors.grey,
      primary: Colors.blueGrey,
      surface: Colors.white,
    ),

    scaffoldBackgroundColor: Colors.lightBlue,

    dividerColor: Colors.white,
    highlightColor: Colors.brown,
    fontFamily: "CustomFont",
  );
}

해당 클래스를 통해 BoardTheme을 전역에서 사용할 수 있게 설정했다.
테마 자체가 데이터 관리에 큰 영향을 준다고 생각하지 않았다.
또, 역할 분리를 확실하게 하기 위해서 core에서 관리하기로 했다.

 fonts:
    - family : CustomFont
      fonts:
        - asset : fonts/BlackHanSans-Regular.ttf

fontFamily를 관리할 때도 애를 먹었던 부분이 있는데, pubsepc.yaml 파일에서는 들여쓰기 기준이 엄격하기 때문에 잘 사용해줘야 겠다.

📖 Theme 속성

위 코드에서도 볼 수 있듯 테마에는 여러 속성들이 존재한다.
아직 완전히 익숙해지지는 않았지만, 학습한 내용들을 정리하고자 한다.

Google에서는 Material3, ColorScheme을 권장한다.

1️⃣ useMaterial3

Material3 디자인을 사용하겠다는 뜻이다.
Material design은 구글이 지정한 디자인 틀이다.
직전 버전인 ver2에 비해 전체적으로 둥근 느낌을 가지고 있고, 부드러운 색감을 가지고 있다.
ColorScheme 기반으로 조화로운 파스텔톤을 자동으로 생성할 수 있다는 강점이 있다.

2️⃣ brightness

앱의 밝기 모드를 나타내며 ligth와 dark 속성이 있는 Enum Class이다.
바탕색과 글자색은 반대로 설정되는데, brightness는 바탕색을 정의한다.

3️⃣ ColorScheme

최신 방식이다.
fromseed를 통해서 brigthness를 설정해주면 텍스트 색상과 배경색의 조화를 알아서 맞춰준다.

4️⃣ fontFamily

앱 전체에 적용할 기본 글꼴 이름이다.
textTheme을 통해 style을 적용하면 좀 더 상세하게 적용할 수 있지만, fontFamily는 전체적인 글꼴을 지정한다.

5️⃣ appBarTheme

상단 앱바를 꾸밀 수 있다.
배경색, 그림자, 크기, title 위치, actions 관련 디자인 등 전부 해당한다.

profile
주니어 개발자

0개의 댓글