18. [Flutter] ThemeData() 로 위젯 디자인 한번에 지정하기(Color, Font 등)

ThemeData()

Flutter에서 ThemeData 클래스는 앱의 전체적인 디자인 테마를 지정하는 데 사용됩니다.

ThemeData를 사용하여 앱의 색상, 텍스트 스타일, 아이콘 테마 등을 일관되게 설정할 수 있습니다. 

ThemeData는 MaterialApp 위젯의 theme: 속성 에 주로 사용되지만, Cupertino 앱의 디자인도 지정할 수 있습니다.

 

• 색상 지정
  - primaryColor: 앱의 기본 색상
  - accentColor: 강조 색상
  - scaffoldBackgroundColor: 스카폴드(전체 앱 화면)의 배경색
  - backgroundColor: 앱의 일반적인 배경색
  등...
  
  
• 텍스트 스타일 지정
  - textTheme: 앱 전체의 텍스트 스타일을 설정합니다. 예: headline1, headline2, bodyText1 등
  - fontFamily: 기본 폰트 패밀리
  - appBarTheme: 앱바의 텍스트 스타일 지정
  등...
  
  
• 아이콘 테마 지정
  - iconTheme: 아이콘의 기본 크기, 색상 등을 설정합니다.
• 버튼 테마 지정
  - buttonTheme: 버튼의 기본 스타일과 색상을 설정합니다.
• 기타 속성
  - cardTheme: 카드 위젯의 테마 지정
  - inputDecorationTheme: 입력 필드 위젯의 테마 지정
  - appBarTheme: 앱바의 테마 지정
  등...

---

사용 예시.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'MyApp',
        
        theme: ThemeData(
            scaffoldBackgroundColor: Colors.white,
            appBarTheme: const AppBarTheme(backgroundColor: Colors.white),
            primaryColor: const Color(0xFFE9435A)),
        
        home: const SignUpScreen());
  }
}

설명.

• scaffoldBackgroundColor: scaffold 위젯 전체의 배경색을 흰색 (Colors.white)으로 지정합니다.
• appBarTheme: 앱바의 테마를 설정하며, AppBarTheme의 backgroundColor 속성을 사용하여 앱바의 배경색을 흰색 (Colors.white)으로 지정합니다.
• primaryColor: 앱의 기본 색상을 지정하며,  빨간색 (Color(0xFFE9435A))으로 설정되어 있습니다.