[flutter] 플러터 프로바이더를 사용하여 테마 설정하기

22 Dec 2023

flutter

플러터 앱에서 테마는 앱의 전반적인 모양과 느낌을 결정하는 중요한 요소입니다. 테마를 효과적으로 관리하려면 플러터 프로바이더를 사용할 수 있습니다. 프로바이더는 앱에서 전역적으로 상태나 설정을 관리할 수 있게 해줍니다.

프로바이더 설정

테마를 설정하기 전에, 먼저 provider 패키지를 프로젝트에 추가해야 합니다. 다음은 pubspec.yaml 파일에 패키지를 추가하는 예시입니다:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

이제 패키지를 설치하고, 플러터 코드에서 프로바이더를 설정할 차례입니다.

테마 프로바이더 작성

테마 프로바이더를 작성하여 앱에서 전역적으로 접근할 수 있는 테마 데이터를 제공할 수 있습니다. 다음은 간단한 테마 프로바이더의 예시입니다:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ThemeProvider with ChangeNotifier {
  ThemeData _themeData = ThemeData.light();

  ThemeData getTheme() => _themeData;

  void setTheme(ThemeData themeData) {
    _themeData = themeData;
    notifyListeners();
  }
}

위 코드에서 ThemeProvider 클래스는 ThemeData를 제공하며, 이를 통해 앱의 테마를 변경할 수 있습니다.

테마 적용

이제 앱의 다른 부분에서 테마를 사용하려면 ThemeProvider를 이용하여 테마를 적용하면 됩니다. 다음은 플러터 앱에서 테마를 변경하는 간단한 예시입니다:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return MaterialApp(
      theme: themeProvider.getTheme(),
      home: MyHomePage(),
    );
  }
}

위 코드에서 ChangeNotifierProvider를 사용하여 ThemeProvider를 앱에 제공하고, MyApp 위젯에서 테마를 설정합니다.

결론

플러터 프로바이더를 사용하여 테마를 관리하면 앱의 테마를 전역적으로 쉽게 변경할 수 있습니다. 프로바이더를 사용하면 상태나 설정과 같은 전역 데이터를 효율적으로 관리할 수 있으며, 앱의 테마를 동적으로 변경하는 데 유용하게 활용할 수 있습니다.

참고 문헌:

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple#changenotifier
https://pub.dev/packages/provider