[14] Flutter Theme

2025-10-14

Flutter 테마 적용하기

테마란?

오늘은 Flutter에서 전역 테마를 적용하는 방법을 정리했다.
각 위젯마다 속성을 지정해서 스타일을 적용할 수 있지만, 앱 규모가 커질수록 위젯마다 스타일을 일일이 주는 방식은 비효율적이다. 특히 라이트/다크 모드를 지원해야 하는 경우 이런 방식으로는 관리가 어렵다.
이때 사용하는 것이 바로 ThemeData 클래스다.

적용 방법

MaterialApp의 theme와 darkTheme 속성에 ThemeData 객체를 전달하여 앱 전체의 시각적 요소를 통일할 수 있다.
ThemeData를 통해 색상, 폰트, 위젯 스타일 등을 한 번에 정의할 수 있다.

ThemeData 구성 예시

• useMaterial3: Material 3 디자인 적용 여부 설정
• colorScheme: ColorScheme.fromSeed를 사용해 seedColor를 기준으로 전체 색상 팔레트를 자동 생성
• brightness: 라이트/다크 테마 여부 지정
• textTheme: TextStyle을 통일하여 앱 전역에 적용 가능
• ElevatedButtonTheme, AppBarTheme, TextButtonTheme 등 Flutter 기본 위젯의 테마도 지정 가능

예시

ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.purple,
    brightness: Brightness.dark,
  ),
  textTheme: TextTheme(
    displayLarge: TextStyle(
      fontSize: 72,
      fontWeight: FontWeight.bold,
    ),
    titleLarge: GoogleFonts.oswald(
      fontSize: 30,
      fontStyle: FontStyle.italic,
    ),
    bodyMedium: GoogleFonts.merriweather(),
    displaySmall: GoogleFonts.pacifico(),
  ),
)

적용

정의한 ThemeData를 MaterialApp에 적용한다.

MaterialApp(
  theme: lightThemeData,
  darkTheme: darkThemeData,
  home: MyHomePage(),
);

—

회고

  앞으로 프로젝트를 시작할 때 기본 테마를 먼저 잡고 가는 습관을 들이는 게 좋겠다.