[flutter] 플러터(Flutter)에서 테마(Theme) 설정하기

플러터는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. 플러터를 사용하면 하나의 코드로 안드로이드와 iOS 모두에서 동작하는 앱을 만들 수 있습니다. 이번 글에서는 플러터에서 앱의 테마(Theme)를 설정하는 방법에 대해 알아보겠습니다.

앱 테마 설정하기

기본 테마 설정

플러터에서는 MaterialApp 위젯을 사용하여 앱의 테마를 설정합니다. MaterialApptheme 속성을 사용하여 기본적인 테마를 설정할 수 있습니다. 예를 들어, 아래와 같이 primaryColor를 설정하여 기본 테마의 주 색상을 변경할 수 있습니다:

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primaryColor: Colors.blue, // 주 색상 변경
    ),
    home: MyHomePage(),
  ));
}

다크 모드 설정

플러터는 다크 모드를 지원하며, themeMode 속성을 사용하여 앱의 테마 모드를 설정할 수 있습니다. 기본적으로는 시스템의 테마 설정을 따르지만, ThemeMode.light 또는 ThemeMode.dark를 사용하여 특정 테마로 고정할 수 있습니다.

void main() {
  runApp(MaterialApp(
    theme: ThemeData(// 기본 테마 설정
      primaryColor: Colors.blue,
    ),
    darkTheme: ThemeData(// 다크 모드 테마 설정
      brightness: Brightness.dark,
    ),
    themeMode: ThemeMode.system, // 시스템의 테마 설정 따르기
    home: MyHomePage(),
  ));
}

테마 사용하기

위와 같이 테마를 설정한 후에는 해당 테마를 사용하는 위젯에서 Theme.of(context)를 호출하여 테마 속성에 접근할 수 있습니다. 예를 들어, 앱의 배경 색상을 설정하고자 할 때 Theme.of(context).backgroundColor을 사용할 수 있습니다.

Container(
  color: Theme.of(context).backgroundColor, // 배경 색상
  child: Text('Hello, Flutter!', style: TextStyle(color: Theme.of(context).accentColor)), // 글자 색상
)

마무리

위에서 소개한 방법을 통해 플러터에서 앱의 테마를 설정할 수 있습니다. 테마를 설정하면 앱의 디자인을 일관성 있게 유지할 수 있고, 다크 모드 등의 추가 기능도 간편하게 구현할 수 있습니다.

더 자세한 정보는 플러터 공식 문서를 참고하세요.