본문 바로가기

그 땐 App했지/그 땐 Flutter했지

[TAVE/Study]Do it! Flutter 9장 내부 저장소 이용하기①

728x90

211008 금

개학한 친구들 벌써 시험기간이라고 한다.

나는 이 시험 기간을 이용해서 지금까지 배운거 복습하고 앞으로 배울 거 예습해야겠다!

 

 

📌 플러터에서 앱의 데이터를 저장하는 방법

  • 공유 환경 설정: 비교적 적은 양의 간단한 데이터를 저장하는 용도, Shared Preferences 클래스 사용
  • 파일: 공유 환경 설정보다 더 복잡하고 다양한 데이터(사진, 음성, 동영상, 긴 텍스트 등)를 다룰 수 있다.
  • 데이터베이스 이용

 

데모 앱의 카운트값 저장하기(공유 환경 설정)

📌 기본으로 만들어지는 플러터 데모 앱에는 +모양의 플로팅 버튼이 있다. 버튼을 누르면 화면의 카운트값이 증가한다.

하지만 앱을 종료하고 다시 실행하면 숫자 0으로 초기화 된다. 이전에 눌렀던 숫자를 유지하는 앱을 만들자!

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  shared_preferences: 2.0.6

👉🏻 패키지 등록

import 'package:shared_preferences/shared_preferences.dart';

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  //데이터 저장 함수
  void _setData(int value) async {
    var key = 'count';
    SharedPreferences pref = await SharedPreferences.getInstance();
    pref.setInt(key, value);
  }

  //데이터 가져오는 함수
  void _loadData() async {
    var key = 'count';
    SharedPreferences pref = await SharedPreferences.getInstance();
    setState(() {
      var value = pref.getInt(key);
      if (value == null) {
        _counter = 0;
      } else {
        _counter = value;
      }
    });
  }

👉🏻 공유 환경설정에 저장하는 데이터는 키-값 쌍으로 구성되어야 한다. 

✍🏻 pref로 SharedPreferences 클래스의 인스턴스를 생성한다.

✍🏻 setInt() 함수는 SharedPreferences 클래스가 제공하는 세터 함수이다. 세터 함수란 데이터를 저장하는 역할을 하는 함수이다. 이렇게 count라는 키에 대응하는 카운트값을 공유 환경설정에 저장한다. 

✍🏻 getInt() 함수라는 게터 함수를 만들었다. 게터 함수는 데이터를 불러오는 역할을 한다. 데이터를 찾기 위한 key를 인자로 넣는다.

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
      _setData(_counter);
    });
  }

👉🏻 카운트 값을 저장하는 _loadData는 앱 실행될 때 호출하기 위해 initState함수에 넣고 _setData는 버튼 누를 때마다 호출되는 _incrementCounter함수에 넣는다. 

📌 이제 앱 종료하고 켜면 이전에 누른 카운터 만큼 숫자가 남아있다!

(영상)

728x90