[flutter] 플러터에서의 앱 테마 변경 방법

플러터(Flutter)는 Google에서 개발한 cross-platform 앱 개발 프레임워크로, 앱을 빠르게 개발하고 멋진 UI를 만들 수 있습니다. 이번에는 플러터에서 앱 테마를 변경하는 방법에 대해 알아보겠습니다.

플러터에서는 앱의 테마를 변경하기 위해 MaterialApp 위젯을 사용합니다. MaterialApp 위젯은 앱의 기본 테마를 설정하는 역할을 합니다.

다크 모드(Dark Mode) 활성화

다크 모드를 활성화하려면, MaterialApp 위젯의 theme 속성을 사용하여 ThemeData 객체를 지정해야 합니다. 아래는 다크 모드를 활성화하는 예시입니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),  // 다크 모드 활성화
      home: MyHomePage(),
    );
  }
}

위 코드에서는 theme 속성을 통해 ThemeData.dark()를 지정하였습니다. 이렇게 하면 앱의 모든 요소가 다크 모드로 표시됩니다.

커스텀 테마 설정

플러터에서는 기본 테마 외에도 커스텀 테마를 설정할 수 있습니다. 커스텀 테마는 ThemeData 객체를 사용하여 지정하며, primaryColor, accentColor, textTheme 등을 설정할 수 있습니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,  // 기본 테마 색상 설정
        accentColor: Colors.red,  // 강조 테마 색상 설정
        textTheme: TextTheme(
          bodyText2: TextStyle(fontSize: 18, color: Colors.black),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

위 코드에서는 primaryColor를 파란색, accentColor를 빨간색으로 설정하고, 텍스트 스타일의 fontSizecolor를 변경하는 커스텀 테마를 만들었습니다.

요약

플러터에서는 MaterialApp 위젯의 theme 속성을 사용하여 앱의 테마를 변경할 수 있습니다. 다크 모드를 활성화하려면 ThemeData.dark()를 지정하고, 커스텀 테마를 설정하려면 ThemeData 객체를 사용하여 원하는 테마를 지정하세요.

플러터의 테마 설정 기능을 활용하여 앱의 룩앤필을 개선하고 사용자 경험을 향상시킬 수 있습니다. 자세한 내용은 Flutter 공식 문서를 참고하세요.

플러터 공식 문서