Flutter - Theme, ThemeData, 테마 바꾸기

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 앱의 전체 테마를 한번에 바꾸는 방법에 대해서 배워보겠습니다. 일반적으로는 라이트모드, 다트모드가 있고 만약 원하신다면 더 특별한 커스텀 테마를 적용하는 것도 가능합니다. 

 

Flutter Theme

Flutter Theme는 하위 위젯의 테마를 적용하는 위젯입니다. 여기서 테마는 앱의 색과 폰트를 의미합니다. 하위 위젯은 Theme.of를 나중에 Theme이 변경되면  ThemeData 개체를 사용하여 자동으로 재구성되므로 변경사항을 적용할 수 있습니다.

 

Flutter Theme을 사용하는 방법은 간단합니다. Theme은 그 하위 모든 위젯의 색과 폰트를 설정하는 위젯이니 Theme을 적용하시고 싶은 위젯 위에 Theme을 작성하시면 됩니다. 

 

ElevatedButton(
    child: Text("배너 버튼"),
    onPressed: () {},
),

위와 같은 위젯이 있다고 가정했을 때 Theme를 적용하고 싶으면 아래와 같이만 변경하면 해당 위젯에 Theme를 적용할 수 있습니다.

 

Theme(
  data: ThemeData(
    primarySwatch: Colors.red,
  ),
  child: ElevatedButton(
    child: Text("배너 버튼"),
    onPressed: () {},
  ),
),

그런데 보통은 1개의 위젯에만 Theme을 적용하는 경우는 없죠? 전체 앱에 적용하고 싶으신 경우는 MaterialApp()에 theme: 에 ThemeData()를 설정해주시면 됩니다. 

 

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.orange
      ),
      home: const Scaffold(
        body: FirstRoute(),
      ),
    );
  }
}

 

Flutter ThemeData

ThemeData는 Theme을 상세하게 설정하는 역할을 합니다. 자세히 배워보겠습니다. 

 

ThemeData.dark() // 앱 전체에 다트모드
ThemeData.light() // 앱 전체에 라이트, 일반 모드, ThemeData()와 같습니다.

이외에도 더 상세한 설정이 가능합니다. 아래는 예시 입니다.

 

ThemeData(
    primarySwatch: Colors.orange,
    appBarTheme: AppBarTheme(color: Colors.yellow),
    bannerTheme: MaterialBannerThemeData(backgroundColor: Colors.grey),
    splashColor: Colors.yellow,
    textTheme: const TextTheme(
      headline1: TextStyle(fontSize: 72, fontWeight: FontWeight.bold),
      headline2: TextStyle(fontSize: 36, fontStyle: FontStyle.italic),
      bodyText1: TextStyle(fontSize: 14),
    ),
),

ThemeData 모든 properties를 설명드릴 순 없을 것 같습니다. 세부설정을 하는 위젯이니 만큼 너무 많은 properties가 있으니 직접 확인해보시면 더 좋을 것 같습니다. 아래는 ThemeData의 공식 링크입니다.

 

ThemeData class - material library - Dart API