플러터(Flutter)는 사용자 인터페이스(UI)를 개발하기 위한 효율적인 프레임워크로서, 동적으로 테마를 변경할 수 있는 기능을 제공합니다. 이 기능을 활용하면 앱의 룩앤필을 신속하게 변경하고 사용자 경험을 향상시킬 수 있습니다.

이 문서에서는 플러터에서 동적 테마 변경 방법에 대해 소개하겠습니다.

테마 생성

ThemeData _lightTheme = ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  accentColor: Colors.pink,
);

ThemeData _darkTheme = ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.blue,
  accentColor: Colors.pink,
);

먼저, 테마 데이터를 생성해야 합니다. 예제에서는 _lightTheme과 _darkTheme 두 가지 테마를 생성했습니다. 각각 brightness, primaryColor, accentColor 등 테마의 속성을 설정할 수 있습니다.

테마 변경

void setLightTheme() {
  setState(() {
    _currentTheme = _lightTheme;
  });
}

void setDarkTheme() {
  setState(() {
    _currentTheme = _darkTheme;
  });
}

테마를 변경하려면 setState 메소드를 통해 해당하는 테마 데이터로 _currentTheme을 업데이트 해야 합니다. 예제에서는 setLightTheme과 setDarkTheme 함수를 사용하여 각각 밝은 테마와 어두운 테마로 전환합니다.

테마 적용

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: _currentTheme,
    // ...
  );
}

마지막으로, MaterialApp 위젯의 theme 속성에 _currentTheme을 설정하여 테마를 적용할 수 있습니다. 이 속성을 통해 앱 전반에 걸쳐 동적으로 변경한 테마가 적용됩니다.

요약

위의 예제를 통해 플러터에서의 동적 테마 변경 방법을 살펴보았습니다. 테마 데이터를 생성하고, setState를 이용해 테마를 변경한 후 MaterialApp 위젯의 theme 속성을 통해 테마를 적용할 수 있습니다. 이를 통해 사용자에게 다양한 테마 옵션을 제공하여 앱의 룩앤필을 개선할 수 있습니다.

더 자세한 내용을 알고 싶다면, 다음 공식 문서를 참고해주세요.