[Flutter] ThemeData위젯(함수)

목차 1. ThemeData 소개 2. ThemeData 속성 1) brightness 2) primaryColor 3) accentColor 4) fontFamily 3. ThemeData 사용 예시 1) 앱 전역에서 ThemeData 사용하기 2) 테마 변경하기 3) 커스텀 테마 만들기

1. ThemeData 소개

애플리케이션의 테마를 정의할 수 있다. ThemeData를 사용하면 앱의 색상, 글꼴, 밝기 등을 일관되게 관리할 수 있다.

2. ThemeData 속성

1) brightness
ThemeData의 밝기를 설정.
Brightness.dark 또는 Brightness.light 값을 가진다.

2) primaryColor
앱의 기본 색상을 설정.
Material Design에서 주요 작업을 나타내는 색상으로 사용.

3) accentColor
앱에서 강조되는 요소의 색상을 설정.
버튼이나 알림과 같이 주요 작업을 강조할 때 사용.

4) fontFamily
앱의 기본 글꼴을 설정.
앱 내의 모든 텍스트 스타일에 적용.

3. ThemeData 사용 예시

1) 앱 전역에서 ThemeData 사용

void main() {   runApp(     MaterialApp(       theme: ThemeData(         primaryColor: Colors.blue,         accentColor: Colors.green,         fontFamily: 'Roboto',       ),       home: MyApp(),     ),   ); }

2) 테마 변경

ThemeData darkTheme = ThemeData.dark(); ThemeData lightTheme = ThemeData.light(); // 앱 전역 테마 변경 void changeTheme(BuildContext context, bool isDark) {   final ThemeData theme = isDark ? darkTheme : lightTheme;   MaterialApp app = MaterialApp(     theme: theme,     home: MyApp(),   );   runApp(app); }

3) 커스텀 테마

final ThemeData myTheme = ThemeData(   primaryColor: Colors.purple,   accentColor: Colors.orange,   fontFamily: 'Montserrat', ); void main() {   runApp(     MaterialApp(       theme: myTheme,       home: MyApp(),     ),   ); }