[날씨앱] P7. Flutter Shared Preferences 추가

https://github.com/cjk09083/ftweather

 

이번 포스트에서는 날씨앱에 Shared Preferences 기능을 추가하여 맵에 추가한 마커들을 저장해두고, 앱 실행 시 불러오도록 하였다.

 

1. Shared Preferences  추가

pubspec.yaml에 아래와 같이 패키지 추가 후 Pub get 해준다. 

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.9

 

2. 마커 목록 (markers) 저장

 아래와 같이 마커 추가 함수인 _createMarker 마지막에 새로운 마커가 추가된 마커목록 _markers를 json형태로 바꿔 저장한다.

  // 마커 생성 및 목록에 추가하는 메서드
  void _createMarker(String name) async {
    if (_controller != null) {
      /* 마커 생성 코드들 */
      
      // 마커 목록에 추가
      _markers.add(marker);

      // 마커 리스트 -> json String으로 변환
      String jsonData = toJson(_markers);
      log('$TAG Markers to Json : $jsonData');
      
      // jsonData 저장
      SharedPreferences prefs = await SharedPreferences.getInstance();
      prefs.setString('markers', jsonData);
    }
    
    // 마커가 추가되었음을 알림
    notifyListeners();
  }

 

2. 마커 목록 불러오기

MapWidget.dart에서 처음 MapModel이 생성될때만 작동하는 MapModel() 메소드를 작성한다. 

MapModel에서는 jsonData를 저장소에서 불러와서 List로 변환해 초기화한다.

class MapModel extends ChangeNotifier {

    // 마커 목록 관리
    final List<Marker> _markers = [];
    List<Marker> get markers => _markers;

	// 모델 생성시 실행될 메소드
    MapModel() {
    	initializeMarkers();
    }
	
    // 마커 목록 초기화 메소드
    void initializeMarkers() async {
        SharedPreferences prefs = await SharedPreferences.getInstance();
        // 마커 목록 불러오기
        String markersJson = prefs.getString('markers') ?? '[]';
        // markers 리스트 채우기
        _markers.addAll(fromJson(markersJson));
        // 변경 알림
        notifyListeners();
    }
  
}