[ Flutter ] 캐시 저장 SharedPreferences

다크모드 설정을 만들었으니 이제 유지 시켜주기위해서

캐시저장 방식중 SharedPreferences를 사용

---

Installation

SharedPreferences를 위해 cocoaPod 설치

https://yumedev.tistory.com/12

[ MacOS ] Flutter CocoaPod 설치

---

Dependencies

shared_preferences: ^2.0.10

반응형

---

SharedPreferences

다크모드 스위치가 값이 바뀔때마다 provider가 실행되므로

바뀐 시점에 해당값을 바로 캐시에 저장한다.

void _saveTheme() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setBool('isTheme',_isDarkMode);
  }

  set isDarkMode(bool value) {
    _isDarkMode = !_isDarkMode;
    isGlobalDarkTheme = _isDarkMode;
    _updateColors();
    _saveTheme();
    notifyListeners(); // 변경을 구독자에게 알림
  }

 

이후 다시 앱을 실행시켰을 경우 저장된 값을 가져오기 위해서 

앱이 실행했을 경우 데이터를 가져오는 메소드를 구현 값을 가져오고 해당 값을 _isDarkMode에 값을 넣어주고 테마에 맞는 컬러로 update

ThemeProvider() { } 로 앱이 실행되자마자 바로 실행되도록 설정

  ThemeProvider() {
    _loadTheme();
  }

  void _loadTheme() async {
    final prefs = await SharedPreferences.getInstance();
    final value = prefs.getBool('isTheme') ?? false;
    _isDarkMode = value;
    _updateColors();
    notifyListeners();
  }

---

전체 코드는 아래와 같다.

class ThemeProvider extends ChangeNotifier {
  bool _isDarkMode = isGlobalDarkTheme; // 초기값 설정

  ThemeProvider() {
    _loadTheme();
  }

  bool get isDarkMode => _isDarkMode;

  set isDarkMode(bool value) {
    _isDarkMode = !_isDarkMode;
    isGlobalDarkTheme = _isDarkMode;
    _updateColors();
    _saveTheme();
    notifyListeners(); // 변경을 구독자에게 알림
  }

  void _updateColors() {
    if (_isDarkMode) {
      bgColor = bgDarkColor;
      boxColor = boxDarkColor;
      textColor = white;
      textLightColor = whiteLight;
      iconColor = white;
    } else {
      bgColor = bgLightColor;
      boxColor = boxLightColor;
      textColor = darkGrey;
      textLightColor = darkLight;
      iconColor = darkGrey;
    }
  }

  void _saveTheme() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setBool('isTheme',_isDarkMode);
  }

  void _loadTheme() async {
    final prefs = await SharedPreferences.getInstance();
    final value = prefs.getBool('isTheme') ?? false;
    _isDarkMode = value;
    _updateColors();
    notifyListeners();
  }
}

---

Main

ThemeProvider 생성자는 ChangeNotifierProvider로 감싸진 경우에만 실행이 되므로 ChangeNotifierProvider로 감싸준다.

그러면 앱이 실행되면서 ThemeProvider() 가 실행되어 타크모드 라이트 모드 저장된 값이 불러와서 적용된다.

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ThemeProvider() ,
      child: Consumer<ThemeProvider>(
        builder: (context, themeProvider, child) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            home: SafeArea(
              child: Scaffold(
                  backgroundColor: bgColor,
                  body: mainPages[selectBtn],
                  bottomNavigationBar: BottomNavigation(
                    selectedBtn: selectBtn,
                    onItemTapped: _onItemTapped,
                  )
              ),
            ),
          );
        }
      ),
    );

 

그러면 다크모드를 설정한 후에 앱을 껏다 켜도 다크모드가 유지 되어있다.