플로터로 앱 만들기 (1) - Theme, ColorScheme, ThemeMode 란.

1. ColorScheme: 색상 체계 정의

ColorScheme은 앱에서 사용할 색상 팔레트를 정의하는 객체입니다. ThemeData에 적용하면 앱 전반의 색상을 일관되게 관리할 수 있습니다.

dart

CopyEdit

ColorScheme myColorScheme = ColorScheme.fromSeed( seedColor: Colors.blue, brightness: Brightness.light, // 또는 Brightness.dark );

💡 핵심 포인트

• primary, secondary, background, surface 등 여러 색상을 정의
• ColorScheme.fromSeed()를 사용하면 자동으로 색상 조합을 생성

---

2. Theme: 앱 전체 스타일 지정

Theme는 앱 전반의 스타일(색상, 글꼴, 버튼 스타일 등)을 관리하는 객체입니다. ThemeData를 설정하면 앱 전체의 UI 요소에 적용됩니다.

dart

CopyEdit

ThemeData myTheme = ThemeData( colorScheme: myColorScheme, textTheme: TextTheme( bodyLarge: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), );

💡 핵심 포인트

• ThemeData는 ColorScheme을 포함해 앱의 스타일을 전체적으로 적용
• textTheme, buttonTheme, appBarTheme 등 다양한 요소를 조정 가능

---

3. ThemeMode: 다크 모드 지원

ThemeMode는 앱이 라이트 모드, 다크 모드 또는 시스템 설정을 따를지를 결정하는 설정입니다. MaterialApp의 themeMode 속성을 통해 적용할 수 있습니다.

dart

CopyEdit

MaterialApp( theme: myTheme, // 라이트 모드 darkTheme: ThemeData.dark(), // 다크 모드 themeMode: ThemeMode.system, // 시스템 설정을 따름 );

💡 핵심 포인트

• ThemeMode.light → 항상 라이트 모드
• ThemeMode.dark → 항상 다크 모드
• ThemeMode.system → 시스템 설정에 따라 자동 변경

---

📌 결론

Flutter에서 ColorScheme은 색상 조합을, Theme은 전체 스타일을, ThemeMode는 라이트/다크 모드를 설정하는 데 사용됩니다. 이를 활용하면 유지보수가 쉬운 일관된 UI를 만들 수 있습니다.