[flutter] 플러터 프로바이더를 활용한 UI 테마 변경
플러터(Flutter)로 앱을 개발할 때 UI 테마를 동적으로 변경하는 것은 매우 중요합니다. UI 테마를 변경하는 방법 중 하나는 플러터 프로바이더(Provider)를 사용하는 것입니다.
Provider 패키지 설치
먼저, provider 패키지를 플러터 프로젝트에 추가해야 합니다.
dependencies:
provider: ^7.0.0
pubspec.yaml 파일에 위와 같이 provider 패키지를 추가하고, flutter pub get 명령어를 통해 패키지를 설치합니다.
테마 변경 프로바이더 생성
다음으로, 테마 변경을 위한 프로바이더를 생성합니다.
import 'package:flutter/material.dart';
class ThemeProvider with ChangeNotifier {
ThemeData _themeData;
ThemeProvider(this._themeData);
ThemeData getTheme() => _themeData;
void setTheme(ThemeData themeData) {
_themeData = themeData;
notifyListeners();
}
}
위 코드에서 ThemeProvider 클래스는 ChangeNotifier를 상속하여 변경 사항을 감지하고, setTheme 메서드를 통해 테마를 변경할 수 있습니다.
테마 변경 UI 적용
다음으로, 테마 변경이 필요한 UI 요소에 ThemeProvider를 연결합니다.
class ThemeSelector extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeProvider = Provider.of<ThemeProvider>(context);
return DropdownButton<ThemeData>(
value: themeProvider.getTheme(),
items: <DropdownMenuItem<ThemeData>>[
DropdownMenuItem(
value: ThemeData.light(),
child: Text('라이트'),
),
DropdownMenuItem(
value: ThemeData.dark(),
child: Text('다크'),
),
],
onChanged: (value) {
themeProvider.setTheme(value);
},
);
}
}
위 예제에서는 DropdownButton을 사용하여 사용자가 테마를 선택할 수 있는 UI를 만들고, 선택에 따라 setTheme 메서드를 호출하여 테마를 변경합니다.
플러터 프로바이더를 사용하여 UI 테마를 동적으로 변경하는 방법에 대해 알아보았습니다. 위의 예시를 참고하여 프로젝트에 적용해 보세요.