[Flutter] Shared preferences 알고 사용하기

: 상대적으로 적은 양의 키-값 데이터를 저장하려고 할 때 사용한다.

사용하고 보니 웹의 localStorage와 비슷하다.

Shared preferences 알아보기

1. 의존성 추가하기

💫 https://pub.dev/packages/shared_preferences/install

위의 사이트에 들어가 최신 버전의 플러그인을 가져온다.

그리고 flutter 파일에서 pubspec.yaml 파일을 찾는다. 아래와 같이 shared_preferences 플러그인을 붙여넣으면 된다. 항상 의존성을 추가하고자 할 때는 들여쓰기를 주의해야 한다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: "<newest version>"

반응형

2. 데이터 저장하기

SharedPreferences 클래스가 제공하는 setter 메서드를 사용하여 데이터를 저장한다. Setter 메서드는 setInt, setBool, setString와 같이 다양한 원시 타입을 지원한다.

Setter 메서드는 두 가지 작업을 수행하는데,

1. 메모리 상에서 키-값 쌍을 동기적으로 업데이트한다.
2. 데이터를 디스크에 저장한다.

// shared preferences 얻기
final prefs = await SharedPreferences.getInstance();

// 값 저장하기
prefs.setInt('counter', counter);

 

3. 데이터 읽기

각 setter에 상응하는 getter가 존재한다. getInt, getBool, getString 와 같은 메서드를 사용할 수 있다.

final prefs = await SharedPreferences.getInstance();

// counter 키에 해당하는 데이터 읽기를 시도한다. 만약 존재하지 않는 다면 0을 반환한다.
final counter = prefs.getInt('counter') ?? 0;

 

4. 데이터 삭제하기

데이터를 삭제할 때는 remove() 메서드를 사용하여 데이터를 삭제할 수 있다.

final prefs = await SharedPreferences.getInstance();

prefs.remove('counter');

 

Shared preferences 활용하기

 

꽉찬 하트

아래는 하트 아이콘을 만들어 클릭시에 상단과 같은 하트로 되게 하고, 반대로 취소시에 하단과 같은 하트가 되게 구현할려고 한다.

빈 하트

1) prefs 셋팅하기

late SharedPreferences prefs;
bool isLiked = false;

• prefs : 지금 디스크에 넣고자 하는 값이 없음으로, late변수로 하여금 값을 나중에 받아오게 한다. 그렇지 않으면 지금 값이 없음으로 오류가 발생한다.
• isLiked : 하트 모양이 눌렀을 경우 true, 취소했을 경우 false값이 된다.

Future initPrefs() async {
    prefs = await SharedPreferences.getInstance();
    final FallingHeart = prefs.getStringList('FallingHeart');
    if (FallingHeart != null) {
      if (FallingHeart.contains(widget.id) == true) {
        setState(() {
          isLiked = true;
        });
      }
    } else {
      prefs.setStringList('FallingHeart', []);
    }
  }

앱을 구동하였을 때 디스크에 넣고자하는 값을 만들어줘야 한다.

• FallingHeart : prefs에 FallingHeart 키의 값을 가져온다.
• if문
  • FallingHeart의 값이 null이 아니라면, FallingHeart에 id값이 있는지 확인한다.
  • 있다면, 하트모양이 바꿔줄 수 있게 true의 값으로 준다.
  • prefs에 값이 없다면 StringList에 []로 셋팅해준다. 그래야 id값을 넣을 수 있다.

 

prefs 셋팅 코드

late SharedPreferences prefs;

Future initPrefs() async {
    prefs = await SharedPreferences.getInstance();
    final FallingHeart = prefs.getStringList('FallingHeart');
    if (FallingHeart != null) {
      if (FallingHeart.contains(widget.id) == true) {
        setState(() {
          isLiked = true;
        });
      }
    } else {
      prefs.setStringList('FallingHeart', []);
    }
  }

 

2) heart버튼 클릭시 활성화하기

onClickHeart() async {
    final FallingHeart = prefs.getStringList('FallingHeart');
    if (FallingHeart != null) {
      if (isLiked) {
        FallingHeart.remove(widget.id);
      } else {
        FallingHeart.add(widget.id);
      }
      await prefs.setStringList('FallingHeart', FallingHeart);
      setState(() {
        isLiked = !isLiked;
      });
    }
  }

• FallingHeart != null : FallingHeart의 값이 null이 아니라면 해당 StringList에 값이 있다는 말이다.
• if (isLiked) : isLiked가 참이라면 좋아요를 취소했다는 말이다. 그러므로 해당 id값을 삭제해준다.
  • isLiked가 false라면 좋아요를 했다는 말이므로, id값을 FallingHeart에 추가해준다.
• setStringList : 바뀐값을 다시 넣어주기 위함이다.
• setState : 그리고 화면에 바뀐 하트를 알려줄 수 있도록 setState를 구현한다.

 

3) heart클릭시 상태 변경하기

actions: [
          IconButton(
              onPressed: onHeartTap,
              icon: Icon(
                  isLiked ? Icons.favorite : Icons.favorite_outline_outlined))
        ],

마지막으로, isLiked가 true라면 꽉찬 하트를 구현하고, 아니라면 빈하트를 구현해준다.

 

실행화면

하트가 보였다가 안 보였다 하는 것은 페이지 이동때문에 흰화면 보이는 것이다.

실행화면

🔗 참고

https://flutter-ko.dev/docs/cookbook/persistence/key-value