[023] 플러터 (Flutter) 배우기 - Shared Preferences (디스크에 간단한 데이터 저장)

안녕하세요~ totally 개발자입니다.

 

SharedPreferences

 

오늘 살펴볼 부분은 SharedPreferences입니다. 간단한 자료를 디스크에 저장할 때 유용하게 사용되며 방대한 자료는 이 방법을 권장하지 않습니다. 이 SharedPreferences는 다양하게 사용될 수 있습니다. 예를 들어 사용자의 정보를 기억한다던지 앱을 사용하고 종료한 후 기존에 설정해두었던 데이터를 불러오는 상황에서 유용합니다. 사용 방법은 간단하며 key, value 구조로 되어 있습니다. 사용하는 방법은 아래와 같습니다.

 

 

1) pubspec.yaml에 shared_preferences: 2.0.5 (현재 기준 2.0.15이지만 필자는 2.0.5로 진행했습니다)를 입력합니다.

버전 및 공식 문서는 아래에서 확인하시면 됩니다.

https://pub.dev/packages/shared_preferences

shared_preferences | Flutter Package

 

2) SharedPreference를 import 해주고 다음처럼 작성합니다. 현재 current username을 보여주는 화면을 만들고, username을 새로 입력해서 다음에 종료하고 다시 실행했을 때 username이 변경하는 것으로 구성한다고 가정하여 코드를 작성합니다.

 

다음처럼 지정해주고 10번째 SharedPreferences 객체 변수를 만들어주고 12번째 Text Controller에서 Text 값을 위해 Controller 생성자를 지정해줍니다. 14~17번째 줄은 initState() 메소드로서 플러터가 상태 객체(State Object)가 만들어질 때 한 번 실행되는 것으로 override하여 super.initState()를 먼저 실행한 뒤 불러올 메소드들을 차례로 호출하면 됩니다. 20-25번째 줄을 보시면, _saveUsername 메소드를 이용하여 사용자가 username을 입력하고 버튼을 눌렀을 때 SharedPreference에 저장하기 위한 메소드로 setString를 이용하여 String 값을 저장할 수 있습니다. 27-31번째 줄에서는 저장된 값을 불러오기 위한 메소드로 먼저 _prefs = await SharedPreferences.getInstance()로 인스턴스를 가져온 뒤, 그 변수로 getString() 함수를 호출할 수 있으며 만약 null인 경우 Not Set를 출력할 수 있도록 만들었습니다. 상태를 업데이트하는 것이기 때문에 setState 메소드로 감싸줍니다.

 

그 외 UI 구성은 위와 같이 하였고 모든 소스 코드는 맨 아래에 추가했으니 참고하시면 됩니다. 여기서 중요한 것은 60번째에 GestureDetector 위젯의 onTap 속성을 활용해서 _saveUsername 메소드를 호출할 수 있으며 45번째 라인의 $_username을 통해서 상태 업데이트될 때 반영된 username 변수를 확인할 수 있습니다. 아래 실습 예제를 확인해보겠습니다.

 

저장되기 전

저장되기 전에 Not Set으로 나오는 것을 알 수 있고 test totally user라고 입력하고 Save를 눌러보면 아래와 같이 되는 것을 확인해볼 수 있습니다.

 

저장된 후

다음처럼 변한 것을 알 수 있으며 어플을 종료하고 다시 열었을 때 이 username 값이 불러와서 그대로 유지되는 것을 알 수 있습니다. 위와 같이 SharedPreferences는 간단한 정보를 디스크에 저장하고 불러오는 방법으로 유용하게 이용할 수 있으므로 숙지하시는 것이 좋습니다.

 

[전체 소스 코드]